school_compare/nextjs-app/components/Navigation.tsx

/**
 * Navigation Component
 * Main navigation header with active link highlighting
 */

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useComparison } from '@/hooks/useComparison';
import styles from './Navigation.module.css';

export function Navigation() {
  const pathname = usePathname();
  const { selectedSchools } = useComparison();

  const isActive = (path: string) => {
    if (path === '/') {
      return pathname === '/';
    }
    return pathname.startsWith(path);
  };

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <Link href="/" className={styles.logo}>
          <span className={styles.logoIcon}>🏫</span>
          <span className={styles.logoText}>SchoolCompare</span>
        </Link>

        <nav className={styles.nav}>
          <Link
            href="/"
            className={isActive('/') ? `${styles.navLink} ${styles.active}` : styles.navLink}
          >
            Home
          </Link>
          <Link
            href="/compare"
            className={isActive('/compare') ? `${styles.navLink} ${styles.active}` : styles.navLink}
          >
            Compare
            {selectedSchools.length > 0 && (
              <span className={styles.badge}>{selectedSchools.length}</span>
            )}
          </Link>
          <Link
            href="/rankings"
            className={isActive('/rankings') ? `${styles.navLink} ${styles.active}` : styles.navLink}
          >
            Rankings
          </Link>
        </nav>
      </div>
    </header>
  );
}