import React from 'react';
import Transition from '../Transition/transition';
import classNames from 'classnames';

interface Props {
  visible: boolean;
  className?: string;
}

const modal: React.FC<Props> = (props) => {
  const { visible, className } = props;
  const classes = classNames('paypay-modal', className);
  return (
    <>
      {visible ? <div className="paypay-mask" /> : null}
      <Transition in={visible} timeout={500} animation="slide-in-bottom">
        <div className={classes}>{props.children}</div>
      </Transition>
    </>
  );
};

export default modal;