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

export default function Loading() {
  return (
    <>
      <div className="mb-3">
        <Skeleton className="mb-1 h-2.5 w-16" />
        <Skeleton className="h-5 w-32" />
        <Skeleton className="mt-2 h-3 w-full max-w-xl" />
      </div>
      <div className="mb-3 flex gap-2 border-b border-line pb-2">
        {Array.from({ length: 8 }, (_, i) => (
          <Skeleton key={i} className="h-3 w-16" />
        ))}
      </div>
      <div className="mb-3 flex gap-1">
        {Array.from({ length: 6 }, (_, i) => (
          <Skeleton key={i} className="h-4 w-20" />
        ))}
      </div>
      <div className="panel">
        <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-40" /></div>
        <SkeletonRows rows={12} />
      </div>
    </>
  );
}