"use client";

import { Button, Spinner } from "@heroui/react";
import { OrderCard } from "./OrderCard";
import type { OrderSummary } from "@/lib/orders";

interface Props {
  orders: OrderSummary[];
  hasMore: boolean;
  isLoadingMore: boolean;
  onLoadMore: () => void;
  onViewDetails: (orderId: string) => void;
}

export function OrderCardList({
  orders,
  hasMore,
  isLoadingMore,
  onLoadMore,
  onViewDetails,
}: Props) {
  return (
    <div className="space-y-4">
      {orders.map((order) => (
        <OrderCard key={order._id} order={order} onViewDetails={onViewDetails} />
      ))}

      {hasMore && (
        <div className="flex justify-center pt-2">
          <Button
            variant="outline"
            onPress={onLoadMore}
            isPending={isLoadingMore}
          >
            {isLoadingMore ? (
              <>
                <Spinner size="sm" />
                Loading…
              </>
            ) : (
              "Load more orders"
            )}
          </Button>
        </div>
      )}
    </div>
  );
}
