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}>
          <div className={styles.logoIcon}>
            <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="2"/>
              <path d="M20 6L20 34M8 14L32 14M6 20L34 20M8 26L32 26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              <circle cx="20" cy="20" r="3" fill="currentColor"/>
            </svg>
          </div>
          <span className={styles.logoText}>SchoolCompare</span>
        </Link>

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