'use client'

interface ImagesGridSkeletonProps {
  viewMode?: 'grid' | 'list'
}

export default function ImagesGridSkeleton({ viewMode = 'grid' }: ImagesGridSkeletonProps) {
  if (viewMode === 'list') {
    return (
      <div className="space-y-6">
        {/* Skeleton Image Cards - List View */}
        {[1, 2, 3, 4, 5, 6].map((index) => (
          <div
            key={index}
            className="group flex items-start gap-6 p-6 bg-slate-800/20 backdrop-blur-sm rounded-2xl border border-slate-700/30 animate-pulse"
            style={{ animationDelay: `${(index - 1) * 150}ms` }}
          >
            {/* Image Container Skeleton */}
            <div className="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 border border-slate-600/30 relative">
              {/* Main image skeleton */}
              <div 
                className="absolute inset-0 bg-slate-700/50 animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 100}ms` }}
              ></div>
              
              {/* Badges skeleton - bottom left for list view */}
              <div className="absolute bottom-1 left-1 z-10 flex gap-1">
                <div 
                  className="px-1 py-0.5 bg-black/60 backdrop-blur-sm rounded text-[8px] border border-white/20 animate-pulse"
                  style={{ animationDelay: `${(index - 1) * 150 + 200}ms` }}
                >
                  <div className="w-6 h-2 bg-white/20 rounded animate-pulse"></div>
                </div>
                <div 
                  className="px-1 py-0.5 bg-black/60 backdrop-blur-sm rounded text-[8px] border border-white/20 animate-pulse"
                  style={{ animationDelay: `${(index - 1) * 150 + 250}ms` }}
                >
                  <div className="w-4 h-2 bg-white/20 rounded animate-pulse"></div>
                </div>
              </div>
            </div>
            
            {/* Content skeleton */}
            <div className="flex-1 min-w-0 space-y-3">
              {/* Prompt skeleton */}
              <div 
                className="w-full h-5 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 300}ms` }}
              ></div>
              <div 
                className="w-3/4 h-5 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 350}ms` }}
              ></div>
              
              {/* Metadata row skeleton */}
              <div className="flex items-center gap-6">
                <div 
                  className="w-16 h-3 bg-white/20 rounded animate-pulse"
                  style={{ animationDelay: `${(index - 1) * 150 + 400}ms` }}
                ></div>
                <div 
                  className="w-20 h-3 bg-white/20 rounded animate-pulse"
                  style={{ animationDelay: `${(index - 1) * 150 + 450}ms` }}
                ></div>
              </div>
            </div>
            
            {/* Actions skeleton */}
            <div className="flex items-center gap-3">
              <div 
                className="w-10 h-10 bg-white/20 rounded-xl animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 500}ms` }}
              ></div>
              <div 
                className="w-10 h-10 bg-white/20 rounded-xl animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 550}ms` }}
              ></div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6">
      {/* Skeleton Image Cards - Grid View */}
      {[1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
        <div
          key={index}
          className="group relative bg-slate-800/20 backdrop-blur-sm rounded-2xl border border-slate-700/30 overflow-hidden animate-pulse"
          style={{ animationDelay: `${(index - 1) * 150}ms` }}
        >
          {/* Image Container Skeleton */}
          <div className="aspect-square relative">
            {/* Main image skeleton */}
            <div 
              className="absolute inset-0 bg-slate-700/50 animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 100}ms` }}
            ></div>
            
            {/* Badges skeleton - bottom left */}
            <div className="absolute bottom-3 left-3 z-10 flex gap-2">
              <div 
                className="px-1.5 py-0.5 bg-black/60 backdrop-blur-sm rounded-md border border-white/20 animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 200}ms` }}
              >
                <div className="w-8 h-3 bg-white/20 rounded animate-pulse"></div>
              </div>
              <div 
                className="px-1.5 py-0.5 bg-black/60 backdrop-blur-sm rounded-md border border-white/20 animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 250}ms` }}
              >
                <div className="w-6 h-3 bg-white/20 rounded animate-pulse"></div>
              </div>
            </div>
          </div>

          {/* Content skeleton */}
          <div className="p-4 space-y-3">
            {/* Prompt skeleton */}
            <div 
              className="w-full h-4 bg-white/20 rounded animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 300}ms` }}
            ></div>
            <div 
              className="w-3/4 h-4 bg-white/20 rounded animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 350}ms` }}
            ></div>
            
            {/* Metadata row skeleton */}
            <div className="flex items-center gap-6">
              <div 
                className="w-16 h-3 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 400}ms` }}
              ></div>
              <div 
                className="w-20 h-3 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 450}ms` }}
              ></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}