export default function ConfirmDialog({ open, title, message, onConfirm, onCancel }) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="fixed inset-0 bg-black/60" onClick={onCancel} />
      <div
        className="relative rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 border"
        style={{
          backgroundColor: "var(--bg-card)",
          borderColor: "var(--border-primary)",
        }}
      >
        <h3
          className="text-lg font-semibold mb-2"
          style={{ color: "var(--text-heading)" }}
        >
          {title || "Confirm"}
        </h3>
        <p className="text-sm mb-6" style={{ color: "var(--text-secondary)" }}>
          {message || "Are you sure?"}
        </p>
        <div className="flex justify-end gap-3">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-sm rounded-md transition-colors"
            style={{
              backgroundColor: "var(--bg-card-hover)",
              color: "var(--text-primary)",
            }}
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            className="px-4 py-2 text-sm rounded-md transition-colors"
            style={{
              backgroundColor: "var(--danger)",
              color: "var(--text-white)",
            }}
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  );
}
