import type { INavbarLink } from '../types';

import { GlobalNavigationBar, GlobalNavigationBarRegion, GlobalNavigationBarLink } from '@salesforce/design-system-react';
import { IconSettings } from '@salesforce/design-system-react';

import '../assets/style/salesforce-lightning-design-system.min.css';
import sprite from '../assets/icons/utility-sprite/svg/symbols.svg';

interface Props {
  navLinks: INavbarLink[];
  pathname: string;
}

export default function Navbar(props: Props) {
  const { navLinks, pathname } = props;

  const isActive = (itemHref: string): boolean => pathname.includes(itemHref);

  return (
    <IconSettings standardSprite={sprite} utilitySprite={sprite} actionSprite={sprite} doctypeSprite={sprite} customSprite={sprite}>
      <GlobalNavigationBar>
        <GlobalNavigationBarRegion region="primary">
          {navLinks.map(item => (
            <GlobalNavigationBarLink key={item.linkLabel} href={item.href} label={item.linkLabel} active={isActive(item.href)} />
          ))}
        </GlobalNavigationBarRegion>
      </GlobalNavigationBar>
    </IconSettings>
  );
}