import { Skeleton } from '#/components/atoms/skeleton.jsx';

/** The widths the rows take, so the placeholder reads as a listing. */
const WIDTHS = ['w-2/5', 'w-1/2', 'w-1/3', 'w-3/5', 'w-1/4', 'w-1/5'];

/**
 * A listing before its rows arrive: one placeholder per row, shaped like
 * the row it stands in for, so the list does not jump when the rows land.
 * @param {{rows?: number}} props
 */
export function ListSkeleton({ rows = 5 }) {
  return (
    <ul aria-hidden="true">
      {WIDTHS.slice(0, rows).map((width) => (
        <li
          key={width}
          className="flex gap-3 border-border border-b px-4 py-3.5"
        >
          <Skeleton className="mt-0.5 size-4 shrink-0 rounded-full" />
          <div className="flex min-w-0 flex-1 flex-col gap-2">
            <Skeleton className={`h-4 ${width}`} />
            <Skeleton className="h-3 w-1/5" />
          </div>
        </li>
      ))}
    </ul>
  );
}