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

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