'use client'

export default function BooksGridSkeleton() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6">
      {/* Skeleton Book Cards */}
      {[1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
        <div
          key={index}
          className="bg-gray-900/40 backdrop-blur-sm border border-gray-800/50 rounded-2xl overflow-hidden animate-pulse"
          style={{ animationDelay: `${(index - 1) * 150}ms` }}
        >
          {/* Book Cover Skeleton */}
          <div className="relative aspect-[2/3] bg-gradient-to-br from-gray-800 to-gray-900">
            <div 
              className="absolute inset-0 bg-white/10 animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 100}ms` }}
            ></div>
            
            {/* Book Spine Effect Skeleton */}
            <div 
              className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-gray-700/50 to-gray-900/50"
              style={{ animationDelay: `${(index - 1) * 150 + 200}ms` }}
            ></div>
          </div>

          {/* Book Details Skeleton */}
          <div className="p-4 space-y-3">
            {/* Title skeleton */}
            <div 
              className="w-3/4 h-4 bg-white/20 rounded animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 300}ms` }}
            ></div>
            
            {/* Author skeleton */}
            <div 
              className="w-1/2 h-3 bg-white/20 rounded animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 400}ms` }}
            ></div>

            {/* Status and date row skeleton */}
            <div className="flex items-center justify-between">
              <div 
                className="w-16 h-3 bg-white/20 rounded-full animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 500}ms` }}
              ></div>
              <div 
                className="w-12 h-3 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 550}ms` }}
              ></div>
            </div>

            {/* Word count and progress row skeleton */}
            <div className="flex items-center justify-between">
              <div 
                className="w-20 h-3 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 600}ms` }}
              ></div>
              <div 
                className="w-8 h-3 bg-white/20 rounded animate-pulse"
                style={{ animationDelay: `${(index - 1) * 150 + 650}ms` }}
              ></div>
            </div>
            
            {/* Progress bar skeleton */}
            <div 
              className="w-full bg-gray-800/50 rounded-full h-1 animate-pulse"
              style={{ animationDelay: `${(index - 1) * 150 + 700}ms` }}
            >
              <div
                className="bg-white/20 h-1 rounded-full animate-pulse"
                style={{ 
                  width: `${30 + (index * 10)}%`,
                  animationDelay: `${(index - 1) * 150 + 750}ms` 
                }}
              ></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}