import { RouteLoading } from "@/components/molecules/RouteLoading";
import { HomeIcon } from "@heroicons/react/24/outline";

export default function AccountLoading() {
  return (
    <RouteLoading
      icon={<HomeIcon />}
      title="Dashboard"
      description="Overview of your account"
      mode="content"
    >
      <div className="space-y-8">
        {/* Greeting skeleton */}
        <div className="space-y-3">
          <div className="h-4 cp-skeleton-shimmer rounded w-24" />
          <div className="h-10 cp-skeleton-shimmer rounded w-56" />
          <div className="h-4 cp-skeleton-shimmer rounded w-40" />
        </div>
        {/* Tasks skeleton */}
        <div className="space-y-4">
          <div className="h-24 cp-skeleton-shimmer rounded-2xl" />
          <div className="h-24 cp-skeleton-shimmer rounded-2xl" />
        </div>
        {/* Bottom section skeleton (stats + activity) */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="h-44 cp-skeleton-shimmer rounded-2xl" />
          <div className="h-44 cp-skeleton-shimmer rounded-2xl" />
        </div>
      </div>
    </RouteLoading>
  );
}
