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

export default function InvoiceDetailLoading() {
  return (
    <RouteLoading
      icon={<CreditCardIcon />}
      title="Invoice"
      description="Invoice details and actions"
      mode="content"
    >
      <div className="space-y-4">
        <LoadingCard />
        <div className="bg-white border border-gray-200 rounded-xl p-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-36" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-28" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-20" />
            </div>
          </div>
        </div>
        <LoadingCard />
      </div>
    </RouteLoading>
  );
}
