import React from 'react'
import { motion } from 'framer-motion'

const list = {
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.5,
    },
  },
  hidden: {
    opacity: 0,
    x: 0,
    transition: {
      duration: 20
    },
  }
}
const item = {
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.5,
    }
  },
  hidden: {
    opacity: 0,
    x: 50,
  }
}

export const Orchestrate = ({ children, visible }) => {
  return (
    <motion.div
      animate={visible ? 'visible' : 'hidden'}
      variants={list}>
        {children.map(child => <motion.div variants={item}>{child}</motion.div>)}
    </motion.div>
  )
}