"use client";

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

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isCancelling: boolean;
  orderNumber: string;
}

export function CancelOrderDialog({
  isOpen,
  onClose,
  onConfirm,
  isCancelling,
  orderNumber,
}: Props) {
  return (
    <AlertDialog>
      <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
        <AlertDialog.Container>
          <AlertDialog.Dialog>
            <AlertDialog.Header>
              <AlertDialog.Icon status="danger" />
              <AlertDialog.Heading>Cancel Order?</AlertDialog.Heading>
            </AlertDialog.Header>
            <AlertDialog.Body>
              <p className="text-sm text-gray-600">
                Are you sure you want to cancel order{" "}
                <span className="font-medium text-[#1a2e2d]">{orderNumber}</span>?{" "}
                This action cannot be undone.
              </p>
            </AlertDialog.Body>
            <AlertDialog.Footer>
              <Button variant="outline" slot="close" isDisabled={isCancelling}>
                Keep Order
              </Button>
              <Button
                variant="danger"
                onPress={onConfirm}
                isDisabled={isCancelling}
              >
                {isCancelling ? (
                  <>
                    <Spinner size="sm" />
                    Cancelling…
                  </>
                ) : (
                  "Yes, Cancel Order"
                )}
              </Button>
            </AlertDialog.Footer>
          </AlertDialog.Dialog>
        </AlertDialog.Container>
      </AlertDialog.Backdrop>
    </AlertDialog>
  );
}
