import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { COLUMN, MEASURE } from '#/lib/layout.js';

/**
 * A repository screen, shaped like the home it stands in for: the sections
 * band, the ref picker on its bar, the file panel with the latest commit on
 * its header, and the About column beside it. Shown while discovery still
 * names the account, so the real page has nothing to say yet.
 */
export function RepoPageSkeleton() {
  return (
    <div className="flex min-h-0 flex-1 flex-col" aria-hidden="true">
      <div className="flex h-12 shrink-0 items-end gap-4 border-border border-b bg-muted px-(--gutter) pb-3">
        <Skeleton className="h-4 w-14" />
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-16" />
      </div>
      <div className="shrink-0 border-border border-b px-(--gutter) py-2">
        <div className={`${MEASURE} flex items-center gap-3`}>
          <Skeleton className="h-8 w-28" />
          <Skeleton className="h-4 w-24" />
        </div>
      </div>
      <div className={`${COLUMN} min-h-0 flex-1 overflow-hidden`}>
        <div className="flex gap-6 px-(--gutter) py-4">
          <div className="min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-card">
            <div className="flex min-h-[41px] items-center gap-3 border-border border-b bg-muted px-4">
              <Skeleton className="size-[18px] rounded-full" />
              <Skeleton className="h-4 w-72 max-w-full" />
            </div>
            {['w-1/4', 'w-1/3', 'w-2/5', 'w-1/5', 'w-3/5'].map((width) => (
              <div
                key={width}
                className="flex items-center gap-3 border-border border-b px-4 py-3 last:border-b-0"
              >
                <Skeleton className="size-4" />
                <Skeleton className={`h-4 ${width}`} />
              </div>
            ))}
          </div>
          <div className="hidden w-72 shrink-0 flex-col gap-4 lg:flex">
            <Skeleton className="h-4 w-16" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-3 w-full" />
            <Skeleton className="h-3 w-2/3" />
          </div>
        </div>
      </div>
    </div>
  );
}