import React, { useState } from 'react';
import { FiAlertTriangle } from 'react-icons/fi';
import Modal from './Modal';

const ConfirmDialog = ({ open, title, message, confirmLabel = 'Confirm', danger = false, onConfirm, onClose }) => {
  const [busy, setBusy] = useState(false);
  const handleConfirm = async () => {
    setBusy(true);
    try { await onConfirm(); }
    finally { setBusy(false); }
  };

  return (
    <Modal open={open} onClose={onClose} title={title} size="sm">
      <div className="flex items-start gap-3">
        {danger && (
          <div className="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 flex-shrink-0">
            <FiAlertTriangle className="w-5 h-5 text-red-600" />
          </div>
        )}
        <p className="text-sm text-gray-700 flex-1 pt-1">{message}</p>
      </div>
      <div className="flex justify-end gap-2 pt-4 mt-4 border-t border-gray-200">
        <button onClick={onClose} className="btn-secondary px-4 py-2" disabled={busy}>Cancel</button>
        <button
          onClick={handleConfirm}
          disabled={busy}
          className={danger ? 'btn-danger px-4 py-2' : 'btn-primary'}
        >
          {busy ? 'Working...' : confirmLabel}
        </button>
      </div>
    </Modal>
  );
};

export default ConfirmDialog;