import { Skeleton } from "@heroui/react";

export function AuthSkeleton() {
  return (
    <div className="flex min-h-[calc(100vh-64px)] flex-col items-center justify-center p-4">
      {/* Card Skeleton */}
      <div className="w-full max-w-md flex flex-col gap-6 rounded-xl bg-zinc-100 dark:bg-zinc-800 p-6 shadow-sm border border-zinc-200 dark:border-zinc-800">
        
        {/* Header */}
        <div className="flex justify-center mb-2">
           <Skeleton className="h-8 w-48 rounded-lg dark:bg-zinc-700" />
        </div>

        {/* Form Fields */}
        <div className="flex flex-col gap-6">
          {/* Email */}
          <div className="flex flex-col gap-2">
            <Skeleton className="h-4 w-12 rounded-lg dark:bg-zinc-700" />
            <Skeleton className="h-10 w-full rounded-lg dark:bg-zinc-700" />
          </div>
          
          {/* Password */}
          <div className="flex flex-col gap-2">
            <Skeleton className="h-4 w-12 rounded-lg dark:bg-zinc-700" />
            <Skeleton className="h-10 w-full rounded-lg dark:bg-zinc-700" />
          </div>
        </div>

        {/* Buttons */}
        <div className="mt-4 flex flex-col gap-3">
          <Skeleton className="h-10 w-full rounded-lg dark:bg-zinc-700" />
          <Skeleton className="h-10 w-full rounded-lg dark:bg-zinc-700" />
        </div>
        
        {/* Footer Link */}
        <div className="flex justify-center mt-2">
           <Skeleton className="h-4 w-32 rounded-lg dark:bg-zinc-700" />
        </div>
      </div>
    </div>
  );
}
