import { SkeletonRow } from '#/components/molecules/skeleton-row.jsx';

/** Directory rows come first and carry no size, so the top rows have no
 * trailing bar. The widths run short to long to read as file names. */
const ROWS = [
  { key: 'a', title: 'w-24' },
  { key: 'b', title: 'w-32' },
  { key: 'c', title: 'w-20', action: 'w-10' },
  { key: 'd', title: 'w-44', action: 'w-12' },
  { key: 'e', title: 'w-28', action: 'w-8' },
  { key: 'f', title: 'w-36', action: 'w-12' },
];

/** The repository listing at a path, as placeholders, shown while the tree
 * loads. */
export function FileTreeSkeleton() {
  return (
    <div className="rounded-2xl border border-border bg-card px-2 py-1">
      {ROWS.map((row) => (
        <SkeletonRow key={row.key} title={row.title} action={row.action} />
      ))}
    </div>
  );
}