import { motion } from 'framer-motion';


const NavBody = ({links, selectedLink, setSelectedLink}) => {
  const translate = {
    initial: {
      y: "100%",
      opacity: 0
    },
    enter: (i) => ({
      y: 0,
      opacity: 1,
      transition: {duration: 1, ease: [0.76, 0, 0.24, 1], delay: i[0]}
    }),
    exit: (i) => ({
      y: "100%",
      opacity: 0,
      transition: {duration: 0.7, ease: [0.76, 0, 0.24, 1], delay: i[1]}
    })
  }

  const getChars = (word) => {
    let chars = [];
    word.split("").forEach( (char, i) => {
      chars.push(
        <motion.span 
            custom={[i * 0.02, (word.length - i) * 0.01]} 
            variants={translate} initial="initial" 
            animate="enter" 
            exit="exit" 
            key={char + i}>
            {char}
        </motion.span>
        )
    })
    return chars;
  }

  return (
    <div>
      {
        links.map((link, index) => {
          const { title, href } = link;
          return <a key={index} href={href}> {/*This a tag can change to be Link to take to pages*/}
            <motion.p onMouseOver={() => {setSelectedLink({isActive: true, index})}} onMouseLeave={() => {setSelectedLink({isActive: false, index})}} 
            animate={selectedLink.isActive && selectedLink.index != index ? "open" : "closed"} className='flex overflow-hidden text-[3.5vw] leading-none text-[#0E0E0E] mx-40 underline'>
            {getChars(title)}
            </motion.p>
          </a>
        })
      }
      <button className='btn-1 mx-40 my-5 block border-[1px] border-[#0E0E0E] rounded-md '> <span className='text text-center text-xl block px-6 py-4'>Take a seat</span></button>
    </div>
  )
}

export default NavBody