"use client"
import SunventusLogo from "@/public/sunventus-logo.png";
import Image from "next/image";
import FadeInWhenVisible from "../fade-in-when-visible/FadeInWhenVisible";
import clsx from "clsx";
import useIsMobile from "@/hooks/useMobile";
import { useRouter } from "next/navigation";
import NavigationItem from "./navigation-item";

interface HeaderParams{
  headerItems: HeaderItem[]
  headerButtons: HeaderItem[]
}

export default function Header({ headerItems, headerButtons }: HeaderParams) {

  const router = useRouter()
  const isMobile = useIsMobile()

  return (
    <FadeInWhenVisible
      delay={0.1}
      className={clsx(
        "w-full flex items-center",
        "flex-col gap-2 mt-5",
        "lg:flex-row lg:h-30 lg:px-32 lg:border-none lg:justify-between lg:gap-0 lg:mt-0",

      )}
    >
      <Image
        alt="Sunventus Logo"
        src={SunventusLogo}
        className={clsx(
          "scale-50",
          "lg:w-[313px] lg:h-[55px] lg:scale-100 lg:p-0","md:px-20",
          "sm:px-10",
          !isMobile && 'cursor-pointer'
        )}
        onClick={() => {
          if(!isMobile){
            router.push('/')
          }
        }}
      />

      <ul className={clsx(
        "list-none lg:flex gap-10 text-neutral-100 font-semibold text-[22px]",
        "hidden"
        )}>
        {headerItems.map(item => (
          <NavigationItem 
            item={item}
            key={item.label}
          />
        ))}
      </ul>
        
      {isMobile &&
      <div className="flex gap-5">
          {headerButtons.map(button => (
            <button className={clsx(
              "py-2 w-40 bg-[#F6A40F] text-white font-bold rounded-xl drop-shadow-lg select-none transition transform duration-300 ease-out active:scale-95 active:bg-yellow-400 hover:shadow-xl",
              "md:mt-10 md:w-50 md:text-xl md:py-3",
              button.className
            )} 
            onClick={() => { 
                router.push(button.route) 
            }}
            key={button.label}
            >
              {button.label}
            </button>
          ))}
          
      </div>}
      

        
    </FadeInWhenVisible>
  );
}