'use client'

import { ArrowRightIcon } from '@heroicons/react/24/outline'

export default function RecentBooksSkeleton() {
  return (
    <div className="lg:col-span-2">
      <div className="flex flex-col space-y-2 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 mb-4">
        <h2 className="text-lg sm:text-xl font-black text-white">Recent Books</h2>
        <div className="text-sm font-bold text-blue-400 hover:text-blue-300 transition-colors flex items-center space-x-1 self-start sm:self-auto">
          <span>View All</span>
          <ArrowRightIcon className="w-4 h-4" />
        </div>
      </div>
      
      <div className="space-y-3">
        {/* Skeleton Book Items */}
        {[1, 2, 3].map((index) => (
          <div 
            key={index}
            className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-4 animate-pulse"
            style={{ animationDelay: `${(index - 1) * 150}ms` }}
          >
            <div className="flex items-center space-x-4">
              {/* Book Cover Skeleton */}
              <div 
                className="relative w-16 h-20 sm:w-20 sm:h-24 flex-shrink-0 overflow-hidden rounded-lg bg-gradient-to-br from-gray-800 to-gray-900"
                style={{ animationDelay: `${(index - 1) * 150 + 100}ms` }}
              >
                <div className="absolute inset-0 bg-white/20 animate-pulse"></div>
                {/* Book Spine Effect Skeleton */}
                <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-700/50 to-gray-900/50"></div>
              </div>
              
              {/* Book Info Skeleton */}
              <div className="flex-1 min-w-0">
                <div 
                  className="w-48 h-5 bg-white/20 rounded animate-pulse mb-2"
                  style={{ animationDelay: `${(index - 1) * 150 + 200}ms` }}
                ></div>
                <div 
                  className="w-32 h-4 bg-white/20 rounded animate-pulse mb-2"
                  style={{ animationDelay: `${(index - 1) * 150 + 250}ms` }}
                ></div>
                <div className="flex flex-col space-y-1 sm:flex-row sm:items-center sm:space-y-0 sm:space-x-4 text-xs text-gray-400">
                  <div className="flex items-center space-x-1">
                    <div 
                      className="w-16 h-3 bg-white/20 rounded animate-pulse"
                      style={{ animationDelay: `${(index - 1) * 150 + 300}ms` }}
                    ></div>
                  </div>
                  <div className="flex items-center space-x-1">
                    <div 
                      className="w-3 h-4 bg-white/20 rounded animate-pulse"
                      style={{ animationDelay: `${(index - 1) * 150 + 350}ms` }}
                    ></div>
                    <div 
                      className="w-20 h-4 bg-white/20 rounded animate-pulse"
                      style={{ animationDelay: `${(index - 1) * 150 + 400}ms` }}
                    ></div>
                  </div>
                </div>
              </div>
              
              {/* Arrow Icon Skeleton */}
              <div 
                className="w-4 h-4 bg-white/20 rounded animate-pulse flex-shrink-0"
                style={{ animationDelay: `${(index - 1) * 150 + 450}ms` }}
              ></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}