"use client";

import React from "react";

const ListSkeleton = ({ count = 6 }: { count?: number }) => {
    return (
        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {Array.from({ length: count }).map((_, index) => (
                <div
                    key={index}
                    className="rounded-xl overflow-hidden border border-gray-200 animate-pulse"
                >
                    <div className="relative aspect-square bg-gray-200">
                        <div className="absolute top-4 left-4 h-10 w-10 rounded-full bg-gray-300" />
                        <div className="absolute top-4 right-4 flex flex-col gap-4">
                            <div className="h-8 w-8 rounded-full bg-gray-300" />
                            <div className="h-8 w-8 rounded-full bg-gray-300" />
                        </div>
                        <div className="absolute bottom-5 left-1/2 -translate-x-1/2">
                            <div className="h-10 w-40 rounded bg-gray-300" />
                        </div>
                    </div>
                    <div className="bg-gray-100 p-5">
                        <div className="h-6 w-3/4 rounded bg-gray-300 mb-3" />
                        <div className="h-4 w-1/2 rounded bg-gray-300 mb-6" />

                        <div className="flex items-center gap-2">
                            <div className="h-5 w-20 rounded bg-gray-300" />
                            <div className="h-4 w-16 rounded bg-gray-300" />
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default ListSkeleton;