"use client";

import { Modal, Button, Spinner } from "@heroui/react";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isReordering: boolean;
  itemCount: number;
}

export function ReorderConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  isReordering,
  itemCount,
}: Props) {
  return (
    <Modal>
      <Modal.Backdrop isOpen={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
        <Modal.Container size="sm">
          <Modal.Dialog>
            <Modal.Header>
              <Modal.Heading>Add items to cart?</Modal.Heading>
            </Modal.Header>
            <Modal.Body>
              <p className="text-sm text-gray-600">
                This will add{" "}
                <span className="font-medium text-[#1a2e2d]">
                  {itemCount} {itemCount === 1 ? "item" : "items"}
                </span>{" "}
                from this order to your cart. Some items may no longer be
                available.
              </p>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="outline" slot="close" isDisabled={isReordering}>
                Cancel
              </Button>
              <Button
                onPress={onConfirm}
                isDisabled={isReordering}
                className="bg-[#f4a13a] text-white hover:bg-[#e08c28]"
              >
                {isReordering ? (
                  <>
                    <Spinner size="sm" />
                    Adding…
                  </>
                ) : (
                  "Add to Cart"
                )}
              </Button>
            </Modal.Footer>
          </Modal.Dialog>
        </Modal.Container>
      </Modal.Backdrop>
    </Modal>
  );
}
