import React, { useState, useEffect } from 'react';
import Modal from './Modal';
import Button from './Button';

export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, loading, confirmWord }) {
  const [typed, setTyped] = useState('');

  useEffect(() => { if (!isOpen) setTyped(''); }, [isOpen]);

  const ready = confirmWord ? typed === confirmWord : true;

  return (
    <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
      <p className="text-sm text-gray-600 mb-4">{message}</p>
      {confirmWord && (
        <div className="mb-5">
          <label className="block text-xs text-gray-500 mb-1">
            Type <span className="font-mono font-semibold text-gray-700">{confirmWord}</span> to confirm
          </label>
          <input
            type="text"
            value={typed}
            onChange={(e) => setTyped(e.target.value)}
            autoFocus
            className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400"
            placeholder={confirmWord}
          />
        </div>
      )}
      <div className="flex justify-end gap-3">
        <Button variant="secondary" onClick={onClose} disabled={loading}>
          Cancel
        </Button>
        <Button variant="danger" onClick={onConfirm} loading={loading} disabled={!ready}>
          Delete
        </Button>
      </div>
    </Modal>
  );
}