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

export default function AccountLoading() {
  return (
    <RouteLoading
      icon={<HomeIcon />}
      title="Account"
      description="Loading your account..."
      mode="content"
    >
      <div className="space-y-6">
        <LoadingCard />
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-card border border-border rounded-2xl p-6">
            <Skeleton className="h-4 w-24 mb-3" />
            <Skeleton className="h-8 w-32" />
          </div>
          <div className="bg-card border border-border rounded-2xl p-6">
            <Skeleton className="h-4 w-24 mb-3" />
            <Skeleton className="h-8 w-32" />
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
