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

interface navItem extends NavLinkProps {
  title: string
}

type MainHeaderProps = {
  navItems?: navItem[]
}

const MainHeader = (props: MainHeaderProps) => {
  const { pathname } = useLocation();
  const { navItems = [

  ] } = props;

  return (
    <Header>
      <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>
      <Link to="/settings">
        <span className="sr-only">Settings</span>
        <Avatar name="John Doe" />
      </Link>
    </Header>
  );
};

export { MainHeader, MainHeaderProps };
