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

const NAV = ['a', 'b', 'c', 'd', 'e'];
const TILES = ['a', 'b', 'c'];

/** The console frame, as skeletons, shown until the overview loads. */
export function AppSkeleton() {
  return (
    <div className="flex min-h-svh w-full">
      <aside className="sticky top-0 hidden h-svh w-[250px] shrink-0 flex-col gap-1 border-border border-r bg-background px-2 py-3 md:flex">
        <div className="flex items-center gap-3 p-3">
          <Skeleton className="size-10 rounded-2xl" />
          <Skeleton className="h-4 w-28" />
        </div>
        <div className="flex flex-col gap-1 px-2 pt-2">
          {NAV.map((key) => (
            <Skeleton key={key} className="h-11 rounded-2xl" />
          ))}
        </div>
      </aside>

      <main className="flex min-w-0 flex-1 flex-col">
        <div className="mx-auto w-full max-w-[1160px] px-4 py-6 sm:px-6 md:px-9 md:py-7">
          <div className="mb-6 space-y-2.5">
            <Skeleton className="h-7 w-64" />
            <Skeleton className="h-4 w-80 max-w-full" />
          </div>
          <div className="space-y-5">
            <Skeleton className="h-32 rounded-3xl" />
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {TILES.map((key) => (
                <Skeleton key={key} className="h-28 rounded-2xl" />
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}