import { RouteLoading } from "@/components/molecules/RouteLoading";
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
import { OrderCardSkeleton } from "@/features/orders/components/OrderCardSkeleton";

export default function OrdersLoading() {
  return (
    <RouteLoading
      icon={<ClipboardDocumentListIcon />}
      title="My Orders"
      description="View and track all your orders"
      mode="content"
    >
      <div className="space-y-4">
        {Array.from({ length: 4 }).map((_, idx) => (
          <OrderCardSkeleton key={idx} />
        ))}
      </div>
    </RouteLoading>
  );
}
