'use client'

import { useScrolled } from '@/lib/useScroll'
import type { Portfolio } from '@/lib/types'
import ThemeToggle from './ThemeToggle'
import styles from './topbar.module.css'

type Props = { name: string; portfolio: Portfolio; showProjects: boolean }

export default function TopBar({ name, portfolio, 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>
          <a href="#contact">Contact</a>
        </nav>
        <ThemeToggle />
        <a className={styles.cta} href={portfolio.href} target="_blank" rel="noreferrer">{portfolio.label ?? 'Portfolio'}</a>
      </div>
    </header>
  )
}