import classNames from 'classnames';
import { PropsWithChildren, useCallback } from 'react';

import './index.less';

interface IProps extends PropsWithChildren {
  visible: boolean;
  onClickOuter: () => void;
  outerClassName?: string;
  innerClassName?: string;
}

const PREFIX = 'overlay';

function Overlay(props: IProps) {
  const { visible, outerClassName, innerClassName, onClickOuter } = props;

  const onClickContent = useCallback((e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation(), []);

  if (!visible) {
    return null;
  }

  return (
    <div className={classNames(`${PREFIX}__container`, outerClassName)} onClick={onClickOuter}>
      <div className={classNames(`${PREFIX}__content`, innerClassName)} onClick={onClickContent}>
        {props.children}
      </div>
    </div>
  );
}

export default Overlay;