import { NavLink } from 'react-router-dom';
import styles from './NavItem.module.scss';

export interface NavItemProps {
  /** Icon element to display */
  icon: React.ReactNode;
  /** Navigation label text */
  label: string;
  /** Route path */
  to: string;
  /** Additional CSS classes */
  className?: string;
}

export const NavItem = ({
  icon,
  label,
  to,
  className = '',
}: NavItemProps) => {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        [styles.navItem, isActive && styles.active, className].filter(Boolean).join(' ')
      }
    >
      <span className={styles.iconWrapper}>{icon}</span>
      <span className={styles.label}>{label}</span>
    </NavLink>
  );
};