'use client'

import { useScrolled } from '@/lib/useScroll'
import styles from './topbar.module.css'

type Props = { name: string; mailHref: string; showProjects: boolean }

export default function TopBar({ name, mailHref, showProjects }: Readonly<Props>) {
  const scrolled = useScrolled()
  return (
    <header className={`${styles.bar} ${scrolled ? styles.solid : ''}`}>
      <div className={styles.inner}>
        <a className={styles.mark} href="#top">{name}</a>
        <nav className={styles.nav} aria-label="Sections">
          {showProjects && <a href="#projects">Projects</a>}
          <a href="#skills">Skills</a>
          <a href="#experience">Experience</a>
          <a href="#education">Education</a>
        </nav>
        <a className={styles.mail} href={mailHref}>Email me</a>
      </div>
    </header>
  )
}