// @design-system: feedback/Skeleton
/**
 * ProfileSkeleton — loading placeholder for the profile page.
 * Avatar + name + rows of detail lines.
 */

import { Skeleton } from './Skeleton';

export function ProfileSkeleton() {
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-4 p-4">
      {/* Avatar + name row */}
      <div className="flex items-center gap-4">
        <Skeleton variant="circle" className="size-16 shrink-0" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton variant="text" className="w-1/2" />
          <Skeleton variant="text" className="w-1/3" />
        </div>
      </div>
      {/* Detail rows */}
      {Array.from({ length: 4 }).map((_, i) => (
        <Skeleton key={i} className="h-12 w-full" />
      ))}
    </div>
  );
}