import { NavLink } from 'react-router-dom'
import { ROUTE_PATHS } from '../app/route-paths'
import styles from './PageNav.module.css'

const NAV_ITEMS = [
  { path: ROUTE_PATHS.home, label: 'Home' },
  { path: ROUTE_PATHS.songSelection, label: 'Song selection' },
  { path: ROUTE_PATHS.game, label: 'Game' },
  { path: ROUTE_PATHS.endOfGame, label: 'End of game' },
  { path: ROUTE_PATHS.leaderboard, label: 'Leaderboard' },
] as const

export function PageNav() {
  return (
    <nav className={styles.nav} aria-label="Main">
      {NAV_ITEMS.map(({ path, label }) => (
        <NavLink
          key={path}
          to={path}
          className={({ isActive }) =>
            `${styles.link} ${isActive ? styles.linkActive : ''}`
          }
          end={path === ROUTE_PATHS.home}
        >
          {label}
        </NavLink>
      ))}
    </nav>
  )
}
