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

// /giris açılırken spinner yerine sayfanın kendi iskeleti: kart, başlık,
// Google butonu, ayraç, e-posta alanı ve gönder butonu aynı yerde belirir —
// içerik gelince zıplama olmaz.
export default function GirisLoading() {
  return (
    <div className="-mb-28 flex min-h-dvh flex-col bg-slate-50">
      <main className="mx-auto flex w-full max-w-md flex-1 flex-col items-stretch justify-center px-6 py-8">
        <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
          {/* Başlık + alt metin */}
          <Skeleton className="h-8 w-40" />
          <Skeleton className="mt-3 h-4 w-full" />
          <Skeleton className="mt-1.5 h-4 w-2/3" />

          {/* Google ile devam et */}
          <Skeleton className="mt-6 h-11 w-full rounded-lg" />

          {/* "veya" ayracı */}
          <div className="mt-4 flex items-center gap-3">
            <Skeleton className="h-px flex-1" />
            <Skeleton className="h-3 w-8" />
            <Skeleton className="h-px flex-1" />
          </div>

          {/* E-posta alanı + gönder butonu */}
          <Skeleton className="mt-4 h-11 w-full rounded-lg" />
          <Skeleton className="mt-3 h-11 w-full rounded-lg" />
        </div>

        {/* Kart altındaki yasal metin */}
        <div className="mt-6 flex flex-col items-center gap-1.5">
          <Skeleton className="h-3 w-3/4" />
          <Skeleton className="h-3 w-1/2" />
        </div>
      </main>
    </div>
  );
}
