import classNames from 'classnames'
import { motion } from 'framer-motion'

/**
 * Animate On Load
 * @param {object} props
 * @param {string} props.className - Container class
 */
const AnimateOnLoad = (props) => {
  const { className: propsClassName, children } = props

  const combinedClassName = classNames(propsClassName)

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 0.3 } }}
      className={combinedClassName}
    >
      {children}
    </motion.div>
  )
}

export default AnimateOnLoad