'use client';
import NavBar from '@/components/Nav';
import logo from '@/assets/logo-snai3i/logo.svg';
import logoMobile from '@/assets/logo-snai3i/logoMobile.svg';
import { Button } from '@/components/ui/button';
import { MenuIcon, X } from 'lucide-react';
import { Link } 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 [intop, setIntop] = useState(true);

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

  return (
    <motion.header
      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 transition-colors bg-primary-foreground z-50 px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] py-[2rem] lg:py-[1.7rem] ${
        nav ? 'shadow' : ''
      } ${intop ? '' : 'bg-white shadow-sm'}`}
    >
      <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>
        <Link
          className="hidden lg:block"
          to="https://platform.snai3i.org/student/login"
          target="_blank"
        >
          <Button className="font-semibold " size="lg">
            Login
          </Button>
        </Link>

        <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.header>

    // <>
    //   <div className="py-[1.56rem] lg:px-[6.25rem] pb-[1.56rem] bg-primary-foreground">
    //   <div className="flex items-center">
    //     <div className="mr-10 hidden md:block">
    //       <img src={logo} alt="logo" />
    //     </div>
    //     <div className="mr-10 md:hidden">
    //       <img src={logoMobile} alt="logo" />
    //     </div>
    //     <div className="flex-1">
    //       <NavBar />
    //     </div>
    //     <Button className="font-semibold hidden lg:block" size="lg">
    //       Login
    //     </Button>
    //     <Button className="hover:bg-transparent" variant="ghost">
    //       <MenuIcon size="30" className="lg:hidden block" />
    //     </Button>
    //   </div>
    // </div>
    // </>
  );
}

export default Header;