import { Card, CardContent } from "@/components/ui/card";

export default function Loading() {
  return (
    <div className="space-y-6">
      <Card className="border-border shadow-sm">
        <CardContent className="p-4">
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
            {Array.from({ length: 6 }).map((_, index) => (
              <div key={index} className="h-10 animate-pulse rounded-md bg-muted" />
            ))}
          </div>
        </CardContent>
      </Card>
      {Array.from({ length: 5 }).map((_, index) => (
        <Card key={index} className="border-border shadow-sm">
          <CardContent className="space-y-3 p-4">
            <div className="h-6 w-44 animate-pulse rounded bg-muted" />
            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
              {Array.from({ length: 6 }).map((__, cardIndex) => (
                <div key={cardIndex} className="h-44 animate-pulse rounded-2xl bg-muted" />
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}