import Skeleton from '@/app/ui/skeleton';

export function SkeletonRow() {
    return (
        <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
            <td className="px-6 py-4">{<Skeleton className="w-[20ch] h-[1rem]" />}</td>
            <td className="px-6 py-4">{<Skeleton className="w-[10ch] h-[1rem]" />}</td>
        </tr>
    );
}

export default function SkeletonTable() {
    return (
        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
                    Guests
                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
                        Loading the list of guests...
                    </p>
                </caption>
                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                </thead>
                <tbody>
                    {[...Array(20)].map((e, i) => <SkeletonRow />)}
                </tbody>
            </table>
        </div>

    );
}