import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
import classNames from 'classnames';

import BaseActiveLink from '#ui/Common/BaseActiveLink';

import type { LinkLike } from '#ui/types';
import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';

import styles from './index.module.css';

type NavItemType = 'nav' | 'footer';

type NavItemProps = {
  href: string;
  type?: NavItemType;
  className?: string;
  target?: HTMLAttributeAnchorTarget | undefined;
  accent?: boolean;

  pathname: string;
  active?: boolean;
  as: LinkLike;
};

const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
  href = '',
  type = 'nav',
  children,
  className,
  target,
  accent,
  ...props
}) => (
  <BaseActiveLink
    target={target}
    href={href}
    className={classNames(
      styles.navItem,
      styles[type],
      { [styles.accent]: accent },
      className
    )}
    activeClassName={styles.active}
    allowSubPath={href.startsWith('/')}
    {...props}
  >
    <span className={styles.label}>{children}</span>

    {target === '_blank' && <ArrowUpRightIcon className={styles.icon} />}
  </BaseActiveLink>
);

export default NavItem;
