import { SearchDropdown } from './SearchDropdown'

type SearchResultItem = {
  result_type: string
  slug: string
  name: string
  detail?: string
}

type HeaderProps = {
  searchOpen: boolean
  searchResults: SearchResultItem[]
  onSearchSelect: (type: string, slug: string) => void
}

export function Header({
  searchOpen,
  searchResults,
  onSearchSelect,
}: HeaderProps) {
  return (
    <header className="header">
      <div className="header-logo">
        <button className="btn-menu">&#9776;</button>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="9" cy="18" r="3" />
          <circle cx="18" cy="15" r="3" />
          <path d="M12 18V6l9-3v3" />
        </svg>
        Furumi
        <span className="header-version">v</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <div className="search-wrap">
          <input id="searchInput" placeholder="Search..." />
          <SearchDropdown
            isOpen={searchOpen}
            results={searchResults}
            onSelect={onSearchSelect}
          />
        </div>
      </div>
    </header>
  )
}