import { Skeleton } from "@heroui/react";

export function PageSkeleton() {
  return (
    <div className="flex flex-col items-center w-full max-w-screen-lg gap-8 px-8 py-28 mx-auto">
      {/* Header */}
      <Skeleton className="h-10 w-48 rounded-lg dark:bg-zinc-700" />

      {/* Tabs / Controls */}
      <div className="flex gap-4 w-full justify-center">
        <Skeleton className="h-10 w-32 rounded-lg dark:bg-zinc-700" />
        <Skeleton className="h-10 w-32 rounded-lg dark:bg-zinc-700" />
      </div>

      {/* Main Content Area */}
      <div className="flex flex-row flex-wrap gap-6 w-full">
        {/* Panel 1 */}
        <Skeleton className="flex-grow h-64 rounded-xl dark:bg-zinc-700" />
        {/* Panel 2 */}
        <Skeleton className="flex-grow h-64 rounded-xl dark:bg-zinc-700" />
      </div>
      
      {/* Bottom Area */}
      <Skeleton className="w-full h-32 rounded-xl dark:bg-zinc-700" />
    </div>
  );
}
