import './modal-overlay.css';

export enum ModalOverlayType {
  Light = 'light',
  Dark = 'dark',
}

type Props = {
  children?: React.ReactNode;
  className?: string;
  type?: ModalOverlayType;
  onClick?: (e: React.MouseEvent) => void;
};

export default function ModalOverlay(props: Props) {
  const className = ['modal-overlay'];

  if (props.className) {
    className.push(props.className);
  }

  if (props.type) {
    className.push(`modal-overlay_type_${props.type}`);
  }

  return (
    <div className={className.join(' ')} onClick={props.onClick}>{props.children}</div>
  );
}