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

type AuthenticatedPageSkeletonProps = {
  hero?: boolean;
  cards?: number;
  formRows?: number;
  message?: string;
};

export function AuthenticatedPageSkeleton({
  hero = true,
  cards = 2,
  formRows = 4,
  message = "Chargement de vos informations...",
}: AuthenticatedPageSkeletonProps) {
  return (
    <div className="space-y-6">
      {hero ? (
        <Card className="border-primary/10 bg-[linear-gradient(135deg,rgba(245,251,247,0.98),rgba(255,255,255,0.98))]">
          <CardContent className="flex flex-col gap-4 p-6 md:flex-row md:items-center md:justify-between">
            <div className="space-y-3">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-8 w-72 max-w-full" />
              <Skeleton className="h-4 w-[28rem] max-w-full" />
            </div>
            <div className="rounded-2xl border border-primary/10 bg-white/85 p-4 shadow-sm">
              <div className="flex items-center gap-3">
                <Skeleton className="h-10 w-10 rounded-full" />
                <div className="space-y-2">
                  <Skeleton className="h-3 w-28" />
                  <Skeleton className="h-3 w-40" />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ) : null}

      <Card>
        <CardHeader className="space-y-3">
          <Skeleton className="h-6 w-52" />
          <Skeleton className="h-4 w-80 max-w-full" />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-xl border border-dashed border-primary/20 bg-primary/5 px-4 py-3 text-sm text-muted-foreground">
            {message}
          </div>
          {Array.from({ length: formRows }).map((_, index) => (
            <div key={index} className="space-y-2">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-10 w-full rounded-md" />
            </div>
          ))}
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        {Array.from({ length: cards }).map((_, index) => (
          <Card key={index}>
            <CardContent className="space-y-4 p-6">
              <Skeleton className="h-5 w-40" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-5/6" />
              <Skeleton className="h-10 w-32 rounded-md" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
