import { Skeleton, SkeletonRows } from "@/components/ui";

function PanelSkeleton({ rows }: { rows: number }) {
  return (
    <div className="panel">
      <div className="border-b border-line px-3 py-2">
        <Skeleton className="h-2.5 w-28" />
      </div>
      <SkeletonRows rows={rows} />
    </div>
  );
}

export default function Loading() {
  return (
    <>
      <div className="mb-4 flex flex-col gap-2">
        <div className="flex items-center gap-2">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-3 w-80 max-w-full" />
        </div>
        <Skeleton className="h-7 w-40" />
      </div>
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <PanelSkeleton rows={4} />
        <PanelSkeleton rows={4} />
      </div>
      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
        <PanelSkeleton rows={3} />
        <PanelSkeleton rows={3} />
      </div>
      <div className="mt-4 panel">
        <div className="flex items-center gap-3 border-b border-line px-3 py-2">
          <Skeleton className="h-3 w-48" />
          <Skeleton className="h-3 w-12" />
        </div>
        <SkeletonRows rows={8} />
      </div>
    </>
  );
}