import React from "react";
import Button from "./Button";
import "./ConfirmPopup.css";

const ConfirmPopup = ({ show, message, onConfirm, onCancel, title = "Confirm" }) => {
  if (!show) return null;

  return (
    <div className="confirm-popup-overlay" onClick={onCancel}>
      <div
        className="confirm-popup-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="confirm-popup-body">
          <div className="confirm-popup-icon-container">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="confirm-popup-icon"
            >
              <path
                d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M12 8V12M12 16H12.01"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <h3 className="confirm-popup-title">{title}</h3>
          <p className="confirm-popup-message">{message}</p>
          <div className="confirm-popup-actions">
            <Button variant="secondary" onClick={onCancel}>
              Cancel
            </Button>
            <Button variant="delete" onClick={onConfirm}>
              Confirm
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmPopup;

