import { SkeletonLine } from "octane-kumo/components/loader";

export function LoadingState({
  label,
  rows = 3,
  field = false,
  multiline = false,
}: {
  label: string;
  rows?: number;
  field?: boolean;
  multiline?: boolean;
}) {
  return (
    <div className="loading-state" role="status" aria-label={label}>
      <span className="sr-only">{label}</span>
      <div
        aria-hidden="true"
        className={
          multiline
            ? "loading-state-lines loading-state-textarea"
            : "loading-state-lines"
        }
      >
        {Array.from({ length: rows }, (_, index) => (
          <SkeletonLine
            key={index}
            minWidth={index === rows - 1 ? 60 : 100}
            maxWidth={index === rows - 1 ? 60 : 100}
            className={field ? "h-9" : "h-3"}
            blockHeight={field ? 64 : 28}
          />
        ))}
      </div>
    </div>
  );
}