import cx from 'clsx';
import { NavLink } from 'react-router-dom';
import styles from './NavigationMenu.module.css';

export function NavigationMenu() {
  return (
    <nav className={styles.navigation}>
      <h1>Color Q</h1>
      <menu className={styles.nav_menu}>
        <li>
          <NavLink
            to="/schemes"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            My Schemes
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/harmonies"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Harmonies
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/wheels"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Wheels
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/tones"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Tones
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/tints-shades"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Tints & Shades
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/lighten-darken"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Lighten & Darken
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/mixer"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Mixer
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/palette"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Auto Palette
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/wacg"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            WACG Check
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/compare"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Compare
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/cards"
            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
            Color Cards
          </NavLink>
        </li>
      </menu>
      <footer>
        &copy; <a href="https://archgrid.net">ArchGrid</a> 2025
      </footer>
    </nav>
  );
}