import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Navbar from './Navbar';


const Header = () => {
  const [isActive, setIsActive] = useState(false);
  const [changeColor, setChangeColor] = useState(false);
  const handleClick = () => {
    setChangeColor(!changeColor)
  }

  const opacity = {
    initial: {
      opacity: 0
    },
    open: {
      opacity: 1,
      transition: {duration: 0.35}
    },
    closed: {
      opacity: 0,
      transition: {duration: 0.35}
    }
  }

  return (
    <div className={`w-[100%] fixed z-40 ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`}>
      <div className="flex items-center justify-between z-40 ">
          <div className="relative flex items-center h-[100%] px-14 pt-14">
            <motion.p variants={opacity} animate={!isActive ? "open" : "closed"}  className="text-2xl text-white">The venture agency.</motion.p>
            <motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-3xl absolute opacity-0 text-[#2D2B2B] font-medium tracking-tight">rejouice</motion.p>
          </div>
        <div onClick={handleClick} className={`flex items-center gap-2 cursor-pointer `} >
          <div onClick={() => {setIsActive(!isActive)}} className="relative flex items-center h-[100%] px-14 pt-14">
            <motion.p variants={opacity} animate={!isActive ? "open" : "closed"}  className="text-2xl text-white">Menu</motion.p>
            <motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-2xl absolute opacity-0">Close</motion.p>
          </div>
        </div>
      </div>
      <AnimatePresence mode='wait'>
        {isActive && <Navbar/>}
      </AnimatePresence>
    </div>
  )
}

export default Header