import React from 'react'
import './Modal.css'

export default function ConfirmModal({ isOpen = true, onClose, onConfirm, title, message, type = 'warning' }) {
    if (!isOpen) return null

    const handleOverlayClick = (e) => {
        if (e.target === e.currentTarget) {
            onClose()
        }
    }

    const handleKeyDown = (e) => {
        if (e.key === 'Escape') {
            onClose()
        }
        if (e.key === 'Enter') {
            onConfirm()
        }
    }

    const getDefaultTitle = () => {
        switch(type) {
            case 'danger': return 'Achtung'
            case 'warning': return 'Bestätigung erforderlich'
            case 'info': return 'Information'
            default: return 'Bestätigung'
        }
    }

    const getModalClass = () => {
        return `modal-content modal-${type}`
    }

    const displayTitle = title || getDefaultTitle()

    return (
        <div className="modal-overlay" onClick={handleOverlayClick} onKeyDown={handleKeyDown} tabIndex={0}>
            <div className={getModalClass()}>
                <div className="modal-header">
                    <h3 className="modal-title">{displayTitle}</h3>
                    <button className="modal-close" onClick={onClose}>&times;</button>
                </div>
                <div className="modal-body">
                    <p style={{whiteSpace: 'pre-line'}}>{message}</p>
                </div>
                <div className="modal-footer confirm-buttons">
                    <button 
                        className="modal-button modal-button-secondary" 
                        onClick={onClose}
                    >
                        Nein
                    </button>
                    <button 
                        className="modal-button modal-button-danger" 
                        onClick={onConfirm}
                        autoFocus
                    >
                        OK Abbrechen
                    </button>
                </div>
            </div>
        </div>
    )
}