import { NavLink } from 'react-router';

export interface SubNavItem {
  to: string;
  label: string;
  /** Match the path exactly (used for index/redirect targets). */
  end?: boolean;
}

interface Props {
  items: SubNavItem[];
}

function subNavClass({ isActive }: { isActive: boolean }) {
  return isActive ? 'sub-nav-item active' : 'sub-nav-item';
}

/** Horizontal secondary navigation for screens with sub-sections (Settings, Admin). */
export function SubNav({ items }: Props) {
  return (
    <nav className="sub-nav">
      {items.map((it) => (
        <NavLink key={it.to} to={it.to} end={it.end} className={subNavClass}>
          {it.label}
        </NavLink>
      ))}
    </nav>
  );
}