import { Skeleton } from './Skeleton';

export function LoadingState({
  label,
  testid,
  lines = 3,
}: {
  label?: string;
  testid?: string;
  lines?: number;
}): JSX.Element {
  return (
    <div
      data-testid={testid ?? 'loading-state'}
      className="flex flex-col items-center justify-center gap-3 p-6 w-full"
    >
      <div className="flex flex-col gap-2 w-full max-w-sm">
        {Array.from({ length: lines }).map((_, i) => (
          <Skeleton
            key={i}
            className={`h-4 ${i === lines - 1 ? 'w-2/3' : 'w-full'}`}
          />
        ))}
      </div>
      {label && (
        <p className="text-xs text-text-muted">{label}</p>
      )}
    </div>
  );
}