import { RouteLoading } from "@/components/molecules/RouteLoading";
import { HomeIcon } from "@heroicons/react/24/outline";
import { LoadingStats, LoadingCard } from "@/components/atoms/loading-skeleton";

export default function DashboardLoading() {
  return (
    <RouteLoading
      icon={<HomeIcon />}
      title="Dashboard"
      description="Loading your overview..."
      mode="content"
    >
      <div className="space-y-6">
        <LoadingStats count={4} />
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <LoadingCard />
            <LoadingCard />
          </div>
          <div className="space-y-6">
            <LoadingCard />
            <LoadingCard />
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
