export default function ConfirmLogoutModal({ isOpen, onClose, onConfirm }) {
    if (!isOpen) return null;
  
    return (
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(4px)',
        zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <div style={{
          backgroundColor: '#1A1A1A', border: '1px solid #ff003c',
          boxShadow: '0 10px 30px rgba(255, 0, 60, 0.2)', borderRadius: '8px',
          maxWidth: '400px', width: '100%', padding: '24px', color: '#FFF', fontFamily: 'monospace'
        }}>
          <h4 style={{ fontSize: '1.1rem', fontWeight: 'bold', letterSpacing: '1px', marginBottom: '10px', color: '#ff003c', textTransform: 'uppercase' }}>
            DÉCONNEXION DU TERMINAL
          </h4>
          <p style={{ fontSize: '0.9rem', color: '#AAA', marginBottom: '24px', lineHeight: '1.5' }}>
            Êtes-vous sûr de vouloir fermer la session sécurisée et quitter l'environnement cloud ?
          </p>
          <div style={{ display: 'flex', gap: '10px' }}>
            <button onClick={onClose} style={{ flex: 1, padding: '10px', backgroundColor: '#333', color: '#FFF', border: 'none', borderRadius: '4px', fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px' }}>
              ANNULER
            </button>
            <button onClick={onConfirm} style={{ flex: 1, padding: '10px', backgroundColor: '#ff003c', color: '#FFF', border: 'none', borderRadius: '4px', fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px' }}>
              SE DÉCONNECTER
            </button>
          </div>
        </div>
      </div>
    );
}