export default function BookCardSkeleton() {
    return (
        <div
            className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg h-full border border-secondary/50 flex flex-col animate-pulse">
            <div className="relative w-full h-[400px] sm:h-32 md:h-48 lg:h-64 xl:h-80 flex-shrink-0">
                <div className="w-full h-full bg-secondary/30 rounded-t-xl"></div>
                <div
                    className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent h-20"></div>
            </div>
            
            <div className="p-3 flex-1 flex flex-col justify-between">
                <div>
                    <div className="h-4 bg-secondary/30 rounded-lg mb-2 w-3/4 mx-auto"></div>
                    <div className="h-3 bg-secondary/20 rounded-lg w-1/2 mx-auto"></div>
                </div>
                <div className="flex justify-between items-center mt-4">
                    <div className="h-6 bg-secondary/30 rounded-full w-16"></div>
                    <div className="flex items-center space-x-2">
                        <div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
                        <div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
                    </div>
                </div>
            </div>
        </div>
    );
}