import { Header, Nav, ProfileProps } from "../../molecules";
import { Button, Logo } from "../../atoms";
import { NavLink, NavLinkProps, useLocation } from "@remix-run/react";
import { AvatarDropDown } from "../AvatarDropDown/AvatarDropDown";

interface navItem extends NavLinkProps {
  title: string
}

type MainHeaderProps = {
  navItems?: navItem[],
  avatar: ProfileProps,
  uuid: string,
  logo: string,
}

const MainHeader = (props: MainHeaderProps) => {
  const { pathname } = useLocation();
  const { navItems = [], avatar, uuid, logo } = props;

  return (
    <Header>
      <Logo logo={logo} />
      <Nav>
        {navItems.length >=1 ? navItems.map((item: navItem, index: number) => <NavLink to={item?.to} key={`mainNavItem-${index}`}>
            <Button variant="nav" active={pathname.split('/')?.includes(item?.title.toLowerCase())} ><>{item?.title}</></Button>
          </NavLink>
        )
      : <>
        <Button variant="nav">Home</Button>
        <Button variant="nav">Marketplace</Button>
        <Button variant="nav">Jobs</Button>
        <Button variant="nav">Directories</Button>
        <Button variant="nav">Communities</Button>
        <Button variant="nav">Events</Button>
        <NavLink to="/resources"><Button variant="nav" active={pathname.split('/')?.includes("resources")}>Resources</Button></NavLink>
        <Button variant="nav">Education</Button>
      </>}
      </Nav>
      <AvatarDropDown avatar={avatar} uuid={uuid} />
    </Header>
  );
};

export { MainHeader, MainHeaderProps };
