import { Modal } from '../../components/modal.js';

interface RiskDialogProps {
  reasons: string[];
  isPending: boolean;
  onCancel(): void;
  onConfirm(): void;
}

export function RiskDialog({ reasons, isPending, onCancel, onConfirm }: RiskDialogProps) {
  return (
    <Modal className="dialog-card" isDismissLocked={isPending} labelledBy="risk-settings-title" onClose={onCancel}>
      <span className="eyebrow">Confirm operational risk</span>
      <h2 id="risk-settings-title">Confirm risky settings</h2>
      <ul className="risk-list">
        {reasons.map((reason) => <li key={reason}>{reason}</li>)}
      </ul>
      <div className="dialog-actions">
        <button autoFocus className="button secondary" disabled={isPending} onClick={onCancel} type="button">Cancel</button>
        <button className="button danger" disabled={isPending} onClick={onConfirm} type="button">
          {isPending ? 'Applying…' : 'Apply risky settings'}
        </button>
      </div>
    </Modal>
  );
}