import { css, keyframes } from "@emotion/react";
import styled from "@emotion/styled";
import { StyledFadeProps } from "./Fade";

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const fadeOut = keyframes`
  from { opacity: 1; }
  to { opacity: 0; }
`;

const Fade = styled.div<StyledFadeProps>`
  animation-duration: ${({ duration }) => (duration ? duration : 500)}ms;
  animation-timing-function: linear;

  ${({ showContent }) => {
    return showContent
      ? css`
          animation-name: ${fadeIn};
        `
      : css`
          animation-name: ${fadeOut};
        `;
  }}
`;

export default Fade;