/**
 * Danger Command Warning Modal
 * Ball Studios <https://git.balls.studio>
 */

import React from 'react';

interface Suggestion { command: string; danger_reason?: string; }
interface Props { suggestion: Suggestion; onConfirm: () => void; onCancel: () => void; }

export default function DangerCommandWarning({ suggestion, onConfirm, onCancel }: Props) {
    return (
        <div className='addon-modal-overlay' role='dialog' aria-modal='true' aria-label='Danger warning'>
            <div className='addon-modal addon-modal-danger'>
                <div className='addon-modal-icon'>⚠️</div>
                <h3 className='addon-modal-title'>Potentially Dangerous Command</h3>
                <p className='addon-modal-body'>
                    <code>/{suggestion.command}</code> may have destructive effects.
                    {suggestion.danger_reason && <><br />{suggestion.danger_reason}</>}
                </p>
                <div className='addon-modal-actions'>
                    <button className='addon-btn addon-btn-secondary' onClick={onCancel}>Cancel</button>
                    <button className='addon-btn addon-btn-danger' onClick={onConfirm}>Send Anyway</button>
                </div>
            </div>
        </div>
    );
}