"use client";

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

type RemoveFromWishlistDialogProps = {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isRemoving: boolean;
  productName: string;
};

export function RemoveFromWishlistDialog({
  isOpen,
  onClose,
  onConfirm,
  isRemoving,
  productName,
}: RemoveFromWishlistDialogProps) {
  return (
    <Modal.Backdrop isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
      <Modal.Container size="sm">
        <Modal.Dialog className="sm:max-w-[400px]">
          <Modal.CloseTrigger />
          <Modal.Header>
            <Modal.Heading>Remove from Wishlist?</Modal.Heading>
          </Modal.Header>
          <Modal.Body>
            <p className="text-sm text-[var(--muted)]">
              Are you sure you want to remove{" "}
              <strong className="text-[var(--foreground)]">{productName}</strong>{" "}
              from your wishlist?
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" slot="close">
              Keep
            </Button>
            <Button
              variant="danger"
              isDisabled={isRemoving}
              onPress={onConfirm}
            >
              {isRemoving ? (
                <>
                  <Spinner size="sm" color="current" />
                  Removing…
                </>
              ) : (
                "Remove"
              )}
            </Button>
          </Modal.Footer>
        </Modal.Dialog>
      </Modal.Container>
    </Modal.Backdrop>
  );
}
