import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function DashboardLoading() {
  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <div className="px-4 lg:px-6">
        <Skeleton className="h-8 w-48" />
      </div>

      <div className="gap-4 grid md:grid-cols-3 px-4 lg:px-6">
        {[0, 1, 2].map((i) => (
          <Card key={i}>
            <CardHeader>
              <Skeleton className="h-4 w-28" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-20" />
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="gap-4 grid md:grid-cols-2 px-4 lg:px-6">
        <Card>
          <CardHeader>
            <Skeleton className="h-4 w-36" />
          </CardHeader>
          <CardContent className="h-72">
            <Skeleton className="h-full w-full rounded-md" />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <Skeleton className="h-4 w-24" />
          </CardHeader>
          <CardContent className="h-72">
            <Skeleton className="h-full w-full rounded-md" />
          </CardContent>
        </Card>
        <Card className="md:col-span-2">
          <CardHeader>
            <Skeleton className="h-4 w-28" />
          </CardHeader>
          <CardContent className="h-96">
            <Skeleton className="h-full w-full rounded-md" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}