import React, { useState } from 'react';
import { FC } from 'react';
import { HeaderProps } from './header.types';
import Image from 'next/image';
import { Section } from '../../molecules/Section';

import { DesktopNav } from './Navbar/Desktop/DesktopNav';
import { MobileNav } from './Navbar/Mobile/MobileNav';

import { Hamburger } from './Navbar/Mobile/HamburgerMenu';

import Link from 'next/link';

import useOpenState from '../../utils/hooks/useOpenState';

export const Header: FC<HeaderProps> = ({ menus, solanaLogo }) => {
  const [openMenu, setOpenMenu] = useState<number | null>(null);
  const [isMobileNavOpen, setIsMobileNavOpen] = useOpenState();

  return (
    <header className="tw-sticky tw-top-0 tw-left-0 tw-z-10" onMouseLeave={() => setOpenMenu(null)}>
      <nav className="tw-relative tw-z-100 tw-isolate">
        <Section
          wrapperClass="tw-bg-common-black"
          className="tw-flex tw-justify-between tw-items-center tw-min-h-[72px] tw-py-0 sm:tw-py-0 md:tw-py-0 lg:tw-py-0"
        >
          <Link href="/">
            <Image src={solanaLogo || ''} alt="Solana Logo" width={149} height={22} priority />
          </Link>
          {menus && (
            <DesktopNav menus={menus} setOpenMenu={setOpenMenu} openMenu={openMenu} className="tw-hidden lg:tw-flex" />
          )}
          <Hamburger
            isMobileNavOpen={isMobileNavOpen}
            setIsMobileNavOpen={setIsMobileNavOpen}
            className="lg:tw-hidden"
          />
        </Section>
        {menus && <MobileNav menus={menus} isMobileNavOpen={isMobileNavOpen} className="lg:tw-hidden" />}
      </nav>
    </header>
  );
};
