import React, { CSSProperties } from 'react';

import { TypographyTokens } from '../../foundation/Typography';
import { NavBox } from './Nav.styled';
import { NavLink, NavLinkProps } from './NavLink';

export type NavProps = {
  Component?: NavLinkProps['Component'];
  className?: string;
  id?: string;
  itemContainerStyles?: CSSProperties;
  links: (NavLinkProps & {
    isHidden?: boolean;
    text: string;
  })[];
  onItemClick?: (href?: string) => void;
  responsive?: boolean;
  typographyToken?: TypographyTokens;
};

export const Nav: React.FunctionComponent<NavProps> = ({
  typographyToken = 'bodyMediumMedium',
  className,
  links,
  Component,
  id,
  itemContainerStyles,
  responsive = false,
  onItemClick,
}) => (
  <NavBox className={className} data-testid="Nav-NavBox" id={id} responsive={responsive}>
    {links
      .filter((link) => !link.isHidden)
      .map((link, index) => (
        <NavLink
          key={`${link.text}_${index}`}
          Component={Component}
          itemContainerStyles={itemContainerStyles}
          typographyToken={typographyToken}
          {...link}
          onItemClicked={onItemClick}
        >
          {link.text}
        </NavLink>
      ))}
  </NavBox>
);