import "../../styles/components/ConfirmAddExistingModal.css";

export default function ConfirmAddExistingModal({
  itemName,
  currentQuantity,
  addingQuantity,
  onConfirm,
  onCancel
}) {
  const newQuantity = currentQuantity + addingQuantity;

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2 className="text-center text-xl mb-4">
          <strong className="text-primary font-semibold">{itemName}</strong> is already in your list
        </h2>

        <div className="mb-4">
          <div className="confirm-add-existing-qty-info">
            <div className="qty-row">
              <span className="qty-label">Current quantity:</span>
              <span className="qty-value">{currentQuantity}</span>
            </div>
            <div className="qty-row">
              <span className="qty-label">Adding:</span>
              <span className="qty-value">+{addingQuantity}</span>
            </div>
            <div className="qty-row qty-total">
              <span className="qty-label">New total:</span>
              <span className="qty-value">{newQuantity}</span>
            </div>
          </div>
        </div>

        <div className="modal-actions">
          <button className="btn btn-outline flex-1" onClick={onCancel}>
            Cancel
          </button>
          <button className="btn btn-primary flex-1" onClick={onConfirm}>
            Update Quantity
          </button>
        </div>
      </div>
    </div>
  );
}