'use client'

import { Bi, SITE } from '@/lib/i18n'
import { useScrolled } from '@/lib/useScroll'
import LangSwitch from './LangSwitch'
import ThemeToggle from './ThemeToggle'
import styles from './topbar.module.css'

/** The same bar as on the front page and the portfolio, plus a row of anchors for the sections of this page. */
export default function TopBar({ showProjects }: Readonly<{ showProjects: boolean }>) {
  const scrolled = useScrolled()
  return (
    <header className={`${styles.bar} ${scrolled ? styles.solid : ''}`}>
      <div className={styles.inner}>
        <a className={styles.brand} href={`${SITE}/`} aria-label="shanaty.ru">
          <svg viewBox="0 0 100 100" width="30" height="30" aria-hidden="true">
            <path d="M70 30A20 20 0 1 0 50 50A20 20 0 1 1 30 70" transform="translate(50 50) scale(.78) translate(-50 -50)" fill="none" stroke="currentColor" strokeWidth="13" strokeLinecap="round" />
            <circle cx="50" cy="50" r="8" fill="var(--y)" />
          </svg>
          <span>shanaty.ru</span>
        </a>
        <nav className={styles.nav} aria-label="shanaty.ru">
          <a href={`${SITE}/resume/`} aria-current="page"><Bi ru="Резюме" en="Resume" /></a>
          <a href={`${SITE}/portfolio/`}><Bi ru="Портфолио" en="Portfolio" /></a>
          <a href="https://git.shanaty.ru/Emil_Shanaty">Gitea</a>
          <a href={`${SITE}/devlog/`}><Bi ru="Девлог" en="Devlog" /></a>
        </nav>
        <LangSwitch />
        <ThemeToggle />
      </div>
      <div className={styles.subwrap}>
        <nav className={styles.sub} aria-label="Page sections">
          {showProjects && <a href="#projects"><Bi ru="Проекты" en="Projects" /></a>}
          <a href="#skills"><Bi ru="Навыки" en="Skills" /></a>
          <a href="#experience"><Bi ru="Опыт" en="Experience" /></a>
          <a href="#education"><Bi ru="Образование" en="Education" /></a>
        </nav>
      </div>
    </header>
  )
}