import { h } from 'preact';
import styles from './Modal.module.css';

/**
 * Generic modal dialog for confirmation.
 * @param {object} props
 * @param {boolean} props.open
 * @param {string} props.title
 * @param {string} props.message
 * @param {Function} props.onCancel
 * @param {Function} props.onConfirm
 * @returns {import('preact').VNode|null}
 */
const Modal = ({ open, title, message, onCancel, onConfirm }) => {
  if (!open) return null;
  return (
    <div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <div className={styles['modal-content']}>
        <div className={styles['modal-header']}>
          <span className={styles['modal-title']} id="modal-title">{title}</span>
          <button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
        </div>
        <div className={styles['modal-body']}>
          <div className={styles['modal-message']}>{message}</div>
        </div>
        <div className={styles['modal-footer']}>
          <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
          <button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
        </div>
      </div>
    </div>
  );
};

export default Modal;