'use client'
import Image from "next/image";
import gsap from "gsap";
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import localFont from "next/font/local";
import logo from '../../../public/logo.png';
import { UserSquare } from "@phosphor-icons/react";




const figtree = localFont({
  src: [
    {
      path: '../../../public/Fonts/figtree/figtree.ttf',
    },
  ],
})




function Navigation() {

  const navbarRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.fromTo(navbarRef.current, {
      y: -40,
      opacity: 0,
    }, {
      y: 10,
      opacity: 1,
      duration: 1,
      ease: "elastic.out(1,0.3)",
    });
  });

  return (
    <div ref={navbarRef} className="w-full border border-black border-4 h-18 rounded-lg my-auto mb-8">
      <div className=" w-[98%] mx-auto">
     <div className=" flex flex-row items-center justify-between">
      <div className="flex items-center gap-4 justify-evenly">
          <Image src={logo} alt="logo" width={200} height={200} className="hover:scale-105 transition-all duration-300 cursor-pointer" />
          <h2 className={`${figtree.className} text-lg font-light italic hover:underline cursor-pointer`}>Your Reservation</h2>
          <h2 className={`${figtree.className} text-lg font-light italic hover:underline cursor-pointer`}>Book Now</h2>
      </div>
      <div className="flex items-center gap-8 justify-around">
        <div className="border border-black border-2 w-0 h-16"></div>
        <button className={`${figtree.className} bg-[#E7FE78] text-black px-4 py-2 rounded-lg shadow-[2px_2px_0px_rgba(0,0,0,1)] font-light italic border-2 border-black hover:scale-105 transition-all duration-300 cursor-pointer hover:shadow-[10px_10px_0px_rgba(0,0,0,1]`}>
          List Your Property
        </button>
        <UserSquare className={`w-14 h-14 hover:scale-110 transition-all duration-300 cursor-pointer`} />
      </div>
     </div> 
     </div>
    </div>
  ) 
}

export default Navigation;