import { Button } from "@/registry/ui/button"

export default function Header() {
  const links = ["Product", "Docs", "Pricing", "Changelog"]

  return (
    <header className="flex items-center justify-between gap-6 border-b border-border px-6 py-4">
      <div className="flex items-center gap-8">
        <a href="#" className="text-sm font-semibold tracking-tight">
          Acme
        </a>
        <nav className="hidden items-center gap-6 text-sm text-muted md:flex">
          {links.map((link) => (
            <a key={link} href="#" className="transition-colors hover:text-fg">
              {link}
            </a>
          ))}
        </nav>
      </div>

      <div className="flex items-center gap-2">
        <Button variant="ghost" size="sm">
          Sign in
        </Button>
        <Button size="sm">Get started</Button>
      </div>
    </header>
  )
}