'use client';
import NavBar from '@/components/Nav';
import logo from '../../../assets/logo.svg';
import logoMobile from '../../../assets/logoMobile.svg';
import { Button } from '@/components/ui/button';
import { MenuIcon, X } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';
import { motion, useMotionValueEvent, useScroll } from 'framer-motion';
import { useState } from 'react';

function Header() {
  const { scrollY } = useScroll();
  const [hidden, setHidden] = useState(false);
  const [nav, setNav] = useState(false);
  const navigate = useNavigate();

  useMotionValueEvent(scrollY, 'change', (latest) => {
    const previous = scrollY.getPrevious();
    if (previous !== undefined && latest > previous && latest > 150 && !nav) {
      setHidden(true);
    } else {
      setHidden(false);
    }
  });

  return (
    <motion.div
      variants={{
        visible: { opacity: 1, y: 0 },
        hidden: { opacity: 0, y: -100 },
      }}
      initial={{ opacity: 0, y: -10 }}
      animate={hidden ? 'hidden' : 'visible'}
      transition={{ duration: 0.35, ease: 'easeInOut' }}
      className={`sticky top-0 mt-6 lg:mt-0 bg-white z-50 px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] py-[1rem] lg:py-[1.56rem] ${
        nav ? 'shadow' : ''
      }`}
    >
      <div
        // initial={{ y: -100 }}
        // animate={{ y: 0 }}
        // transition={{ duration: 0.35, type: 'spring', stiffness: 100,  }}
        className="flex items-center justify-between lg:justify-start"
      >
        <div className="mr-10 hidden md:block">
          <Link to="/">
            <img draggable={false} src={logo} alt="logo" />
          </Link>
        </div>
        <div className="mr-10 md:hidden">
          <Link to="/">
            <img draggable={false} src={logoMobile} alt="logo" />
          </Link>
        </div>
        <div className="hidden lg:block lg:flex-1">
          <NavBar />
        </div>
        <Button
          className="font-semibold hidden lg:block bg-primaryMarket hover:bg-primaryMarket/80"
          size="lg"
          onClick={() => navigate('/login')}
        >
          Login
        </Button>
        <Button
          className="hover:bg-transparent lg:hidden block justify-end"
          variant="ghost"
          onClick={() => setNav(!nav)}
        >
          {nav ? <X size="30" /> : <MenuIcon size="30" />}
        </Button>
      </div>
      {nav && <NavBar mobile />}
    </motion.div>
  );
}

export default Header;

// function Header() {
//   return (
//     <div className="px-[100px] py-[25px]">
//       <div className="flex items-center">
//         <div className="mr-[65px]">
//           <img src={logo} alt="logo" />
//         </div>
//         <nav className='flex-1'>
//           <ul className="flex space-x-6">
//             <li>Home</li>
//             <li>Market</li>
//             <li>Programs</li>
//             <li>Events</li>
//           </ul>
//         </nav>
//         <div>
//           <button className="btn btn-primary">Login</button>
//         </div>
//       </div>

//     </div>
//   )
// }

// export default Header