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

interface ConfirmationDialogProps {
  action: 'start' | 'stop';
  errorMessage?: string | null;
  isPending: boolean;
  onCancel(): void;
  onConfirm(): void;
}

export function ConfirmationDialog({ action, errorMessage = null, isPending, onCancel, onConfirm }: ConfirmationDialogProps) {
  const isStarting = action === 'start';

  return (
    <Modal className="dialog-card" isDismissLocked={isPending} labelledBy="confirmation-title" onClose={onCancel}>
      <span className="eyebrow">Confirm action</span>
      <h2 id="confirmation-title">{isStarting ? 'Start bot?' : 'Stop bot?'}</h2>
      <p>
        {isStarting
          ? 'The bot will resume automated processing.'
          : 'The bot will pause after its current operation.'}
      </p>
      {errorMessage ? <p className="dialog-error" role="alert">{errorMessage}</p> : null}
      <div className="dialog-actions">
        <button autoFocus className="button secondary" disabled={isPending} onClick={onCancel} type="button">
          Cancel
        </button>
        <button className={isStarting ? 'button primary' : 'button danger'} disabled={isPending} onClick={onConfirm} type="button">
          {isPending ? 'Applying…' : `Confirm ${action}`}
        </button>
      </div>
    </Modal>
  );
}