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

/** Indent and length per line, so the block reads as code. */
const LINES = [
  { key: 'a', width: 'w-[38%]', indent: '' },
  { key: 'b', width: 'w-[52%]', indent: '' },
  { key: 'c', width: 'w-[30%]', indent: 'ml-6' },
  { key: 'd', width: 'w-[44%]', indent: 'ml-6' },
  { key: 'e', width: 'w-[22%]', indent: 'ml-12' },
  { key: 'f', width: 'w-[48%]', indent: 'ml-6' },
  { key: 'g', width: 'w-[18%]', indent: '' },
  { key: 'h', width: 'w-[56%]', indent: '' },
  { key: 'i', width: 'w-[34%]', indent: 'ml-6' },
  { key: 'j', width: 'w-[26%]', indent: 'ml-6' },
];

/** A file's header line and its text, as placeholders, shown while the file
 * loads. */
export function FileContentSkeleton() {
  return (
    <div className="rounded-2xl border border-border bg-card">
      <div className="flex items-center justify-between border-border border-b px-5 py-2.5">
        <Skeleton className="h-3 w-16 rounded-md" />
        <Skeleton className="h-3 w-12 rounded-md" />
      </div>
      <div className="flex flex-col gap-2.5 px-5 py-4">
        {LINES.map((line) => (
          <Skeleton
            key={line.key}
            className={`h-3 rounded-md ${line.indent} ${line.width}`}
          />
        ))}
      </div>
    </div>
  );
}