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

export default function AccountLoading() {
  return (
    <RouteLoading
      icon={<UserIcon />}
      title="Account"
      description="Loading your profile..."
      mode="content"
    >
      <div className="space-y-6">
        <LoadingCard />
        <div className="bg-white border border-gray-200 rounded-[var(--cp-card-radius)] p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-3">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-10 w-full" />
            </div>
            <div className="space-y-3">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-10 w-full" />
            </div>
            <div className="space-y-3">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-10 w-full" />
            </div>
            <div className="space-y-3">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-10 w-full" />
            </div>
          </div>
          <div className="mt-6 flex justify-end">
            <Skeleton className="h-10 w-32" />
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
