// モーダルにする予定のコンポーネント

import React from "react";
import { css, StyleSheet } from "aphrodite";
import { CSSTransition } from "react-transition-group";

const modal = ({ isShow }) => {
  const styles = StyleSheet.create({
    wrap: {
      background: "red",
      width: 200,
      height: 200
    },
    enter: {
      opacity: 0,
      transition: "all 3s"
    },
    enterActive: {
      opacity: 1
    },
    exit: {
      opacity: 1,
      transition: "all 3s"
    },
    exitActive: {
      opacity: 0
    }
  });

  return (
    <CSSTransition
      in={isShow}
      mountOnEnter
      unmountOnExit
      classNames={{
        enter: css(styles.enter),
        enterActive: css(styles.enterActive),
        exit: css(styles.exit),
        exitActive: css(styles.exitActive)
      }}
    >
      <div className={css(styles.wrap)}>modal</div>
    </CSSTransition>
  );
};

export default modal;