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

export default function ListemLoading() {
  return (
    <main className="mx-auto w-full max-w-7xl px-4 py-10">
      <Skeleton className="h-6 w-40 rounded-full" />
      <Skeleton className="mt-4 h-9 w-3/4 max-w-xl" />
      <Skeleton className="mt-3 h-5 w-2/3 max-w-lg" />
      <div className="mt-8 grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_340px]">
        <div className="flex flex-col gap-2">
          {Array.from({ length: 10 }).map((_, i) => (
            <Skeleton key={i} className="h-16 w-full rounded-xl" />
          ))}
        </div>
        <Skeleton className="h-[480px] w-full rounded-2xl" />
      </div>
    </main>
  );
}
