'use client';
import logo from '@/assets/logo-snai3i/logo.svg';
import logoMobile from '@/assets/logo-snai3i/logoMobile.svg';
import { Button } from '@/components/ui/button';
import { UndoIcon } 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);

  useMotionValueEvent(scrollY, 'change', (latest) => {
    const previous = scrollY.getPrevious();
    if (previous !== undefined && latest > previous && latest > 150) {
      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-slate-50/50 z-50 px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] py-[1rem] lg:py-[1.56rem] 
      `}
    >
      <div className="flex items-center justify-between lg:justify-start">
        <div className="flex-1 mr-10 hidden md:block">
          <Link to="/">
            <img draggable="false" src={logo} alt="logo" />
          </Link>
        </div>
        <div className="flex-1 mr-10 md:hidden">
          <Link to="/">
            <img draggable="false" src={logoMobile} alt="logo" />
          </Link>
        </div>
        <Link to="/">
          <Button
            className="text-secondary text-base md:text-lg font-semibold flex"
            variant="link"
            size="lg"
          >
            <UndoIcon className="h-6 w-6 md:h-7 md:w-7 pr-2" />
            Back home
          </Button>
        </Link>
      </div>
    </motion.div>
  );
}

export default Header;