import * as React from 'react';
import styles from './Modal.module.scss';
import { IconButton } from './IconButton';
import { texts } from '../../texts';

export interface IModalProps {
  title: string;
  onClose: () => void;
  footer?: React.ReactNode;
  children: React.ReactNode;
}

export const Modal: React.FC<IModalProps> = ({ title, onClose, footer, children }) => (
  // Клик по подложке закрывает окно, клик внутри — нет (проверяем сам currentTarget).
  <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
    <div className={styles.box}>
      <div className={styles.header}>
        <div className={styles.title}>{title}</div>
        <IconButton icon="close" label={texts.common.close} onClick={onClose} />
      </div>
      <div className={styles.body}>{children}</div>
      {footer && <div className={styles.footer}>{footer}</div>}
    </div>
  </div>
);