import { Link } from 'react-router-dom';
import { useAtom, useAtomValue } from 'jotai';
import { navOpenState, activeSectionState, languageState } from '../state/atoms';
import { getTranslations } from '../translations';
import ThemeToggle from './ThemeToggle';
import LanguagePicker from './LanguagePicker';
import styles from '../styles/components/Navbar.module.scss';

export default function Navbar() {
  const [isOpen, setIsOpen] = useAtom(navOpenState);
  const activeSection = useAtomValue(activeSectionState);
  const language = useAtomValue(languageState);
  const t = getTranslations(language);

  const NAV_LINKS = [
    { label: t.nav.home, section: 'home' },
    { label: t.nav.about, section: 'about' },
    { label: t.nav.projects, section: 'projects' },
    { label: t.nav.contact, section: 'contact' },
  ];

  return (
    <header className={styles.header}>
      <nav className={styles.nav}>
        <Link to="/" className={styles.logo} onClick={() => setIsOpen(false)}>
          <span className={styles.logoBracket}>&lt;</span>
          human id="veikko" class="lintujarvi"
          <span className={styles.logoBracket}>/&gt;</span>
        </Link>

        <ul className={`${styles.links} ${isOpen ? styles.open : ''}`}>
          {NAV_LINKS.map(({ label, section }) => (
            <li key={section}>
              <Link
                to={`/${section}`}
                onClick={() => setIsOpen(false)}
                className={activeSection === section ? styles.active : undefined}
              >
                {label}
              </Link>
            </li>
          ))}
        </ul>

        <div className={styles.navActions}>
          <LanguagePicker />
          <ThemeToggle />

          <button
            className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
            onClick={() => setIsOpen((v) => !v)}
            aria-label={t.theme.switchToLight}
            aria-expanded={isOpen}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </nav>
    </header>
  );
}