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

export function ProfileSkeleton() {
  return (
    <div className="flex min-h-[calc(100vh-64px)] items-center justify-center p-4">
      <Card className="w-full max-w-2xl">
        <Card.Header>
          <Skeleton className="h-8 w-32 rounded-lg dark:bg-zinc-700" />
        </Card.Header>
        <Card.Content className="flex flex-col gap-8 md:flex-row">
          <div className="flex flex-col items-center gap-4">
            {/* Avatar */}
            <Skeleton className="h-32 w-32 rounded-full dark:bg-zinc-700" />
            <Skeleton className="h-10 w-24 rounded-lg dark:bg-zinc-700" />
          </div>

          <div className="flex-1 space-y-6">
            <div className="space-y-4">
              {/* Inputs */}
              {[1, 2, 3].map((i) => (
                <div key={i} className="space-y-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>

            <div className="mt-6 flex justify-end gap-3">
              <Skeleton className="h-10 w-24 rounded-lg dark:bg-zinc-700" />
            </div>
          </div>
        </Card.Content>
      </Card>
    </div>
  );
}
