import { Link } from '@tanstack/react-router'
import type { Globals, Menu } from '~/lib/types'
import { ThemeToggle } from './theme-toggle'

type Props = {
  globals: Globals
  menu: Menu | undefined
}

export function Header({ globals, menu }: Props) {
  return (
    <header className="bg-muted/50">
      <div className="flex h-16 items-center gap-4 px-4">
        <Link to="/" className="text-base font-semibold hover:no-underline">
          {globals.site_name}
        </Link>
        <nav className="flex gap-1 pl-2">
          {menu?.items.map((item) => (
            <a
              key={item.label}
              href={item.url ?? '#'}
              className="px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </nav>
        <div className="ml-auto">
          <ThemeToggle />
        </div>
      </div>
    </header>
  )
}