'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Search } from 'lucide-react'
import type { Category } from '@/lib/types'

interface Props {
  categories: Category[]
}

export default function NavbarClient({ categories }: Props) {
  const pathname = usePathname()

  function openSearch() {
    window.dispatchEvent(new CustomEvent('kotobane:open-search'))
  }

  return (
    <nav className="bg-bg-elevated border-b border-border sticky top-0 z-40">
      <div className="max-w-[1200px] mx-auto px-6 h-14 flex items-center gap-6">
        <Link href="/" className="text-lg font-black text-accent tracking-[3px] shrink-0">
          言羽
        </Link>

        <div className="w-px h-4 bg-border shrink-0" />

        <div className="flex items-center gap-1 overflow-x-auto">
          {categories.map((cat) => {
            const isActive = pathname.startsWith(`/${cat.slug}`)
            return (
              <Link
                key={cat.slug}
                href={`/${cat.slug}`}
                className={`text-xs font-medium px-3 py-1 rounded-sm whitespace-nowrap transition-colors ${
                  isActive
                    ? 'text-accent'
                    : 'text-text-muted hover:text-text-secondary'
                }`}
              >
                {cat.name}
              </Link>
            )
          })}
        </div>

        <button
          onClick={openSearch}
          className="ml-auto flex items-center gap-2 text-text-muted hover:text-text-secondary transition-colors shrink-0"
          aria-label="Open search"
        >
          <Search size={16} />
          <kbd className="hidden sm:inline-flex bg-bg-card border border-border rounded px-1.5 py-0.5 text-[10px] font-mono">
            ⌘K
          </kbd>
        </button>
      </div>
    </nav>
  )
}