// @design-system: feedback/Skeleton
import { Skeleton } from './Skeleton';

export function PageShellSkeleton() {
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-6 p-4">
      {/* Page heading */}
      <Skeleton className="h-8 w-1/2" />
      {/* Form field rows */}
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="flex flex-col gap-2">
          <Skeleton variant="text" className="w-1/4" />
          <Skeleton className="h-10 w-full" />
        </div>
      ))}
    </div>
  );
}