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

export default function Loading() {
  return (
    <>
      <div className="mb-3 flex flex-col gap-2">
        <Skeleton className="h-6 w-28" />
        <Skeleton className="h-3 w-96 max-w-full" />
      </div>
      <div className="mb-3 flex gap-4 border-b border-line pb-2">
        <Skeleton className="h-3 w-14" />
        <Skeleton className="h-3 w-10" />
      </div>
      <div className="panel">
        <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-32" /></div>
        <div className="divide-y divide-line">
          {Array.from({ length: 14 }, (_, i) => (
            <div key={i} className="grid grid-cols-[2rem_1fr_5rem_3rem_3rem_3rem] items-center gap-x-3 px-3 py-2 sm:grid-cols-[2rem_1fr_5rem_3rem_3rem_3rem_4rem_4rem_4rem_4rem]">
              <Skeleton className="h-3 w-5" />
              <div className="flex flex-col gap-1.5"><Skeleton className={`h-3.5 ${i % 3 === 0 ? "w-40" : i % 3 === 1 ? "w-28" : "w-52"}`} /><Skeleton className="h-2.5 w-24" /></div>
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-5 w-8" />
              <Skeleton className="h-3 w-7" />
              <Skeleton className="h-3 w-7" />
              <Skeleton className="hidden h-3 w-6 sm:block" />
              <Skeleton className="hidden h-3 w-8 sm:block" />
              <Skeleton className="hidden h-3 w-8 sm:block" />
              <Skeleton className="hidden h-3 w-10 sm:block" />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}