import { Skeleton, ShowCardSkeleton, PageHeaderSkeleton } from "@/components/ui/skeleton"

export default function ShowsLoading() {
    return (
        <div className="flex flex-col gap-6">
            <PageHeaderSkeleton />

            {/* Filters skeleton */}
            <div className="flex gap-2">
                <Skeleton className="h-10 w-32" />
                <Skeleton className="h-10 w-40" />
                <Skeleton className="h-10 flex-1 max-w-xs" />
            </div>

            {/* Shows grid */}
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {Array.from({ length: 12 }).map((_, i) => (
                    <ShowCardSkeleton key={i} />
                ))}
            </div>
        </div>
    )
}