import type { ReactNode } from 'react'
import styled, { keyframes } from 'styled-components/macro'

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const Wrapper = styled.div`
  opacity: 1;
  animation-name: ${fadeIn};
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 0.3s;
`

type Props = {
  children: ReactNode,
  className?: string,
}

export const FadeIn = ({ children, className }: Props) => (
  <Wrapper className={className}>{children}</Wrapper>
)
