import { Skeleton } from '@/components/ui/skeleton';

/** Skeleton for DeveloperDashboardView — stats + keys table + docs. */
export function DeveloperDashboardViewSkeleton() {
  return (
    <div className="space-y-8 pb-20 max-w-layout-content mx-auto">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-border/50 pb-6">
        <div>
          <Skeleton className="h-9 w-56 mb-2" />
          <Skeleton className="h-4 w-48" />
        </div>
        <div className="flex gap-4">
          <Skeleton className="h-10 w-36 rounded-full" />
          <Skeleton className="h-10 w-32 rounded-full" />
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 mb-8">
        <Skeleton className="h-10 flex-1 rounded-lg" />
        <Skeleton className="h-10 flex-1 rounded-lg" />
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-28 rounded-xl" />
        ))}
      </div>

      {/* Keys table */}
      <Skeleton className="h-64 w-full rounded-xl" />

      <span className="sr-only">Chargement du portail développeur...</span>
    </div>
  );
}