Home Search

"use client"
import { useHomeSearch } from "@pandaidx/widgets/client"

// Draw it in the site's style; Panda owns the suggestions, the keyboard and the navigation.
export const HeroSearch = () => {
  const search = useHomeSearch()
  return (
    <div className="relative mx-auto w-full max-w-2xl" onPointerEnter={search.warm}>
      <div role="tablist" className="mb-3 flex gap-6">
        {search.markets.map((tab) => (
          <button key={tab.id} type="button" role="tab" aria-selected={tab.active} onClick={() => search.setMarket(tab.id)} className={tab.active ? "border-b-2 border-foreground pb-1" : "pb-1 opacity-60"}>
            {tab.label}
          </button>
        ))}
      </div>
      <div className="flex items-center border-b border-foreground/30">
        <input {...search.inputProps} aria-label={search.placeholder} className="h-14 flex-1 bg-transparent outline-none" />
        <button type="button" disabled={search.pending} onClick={() => void search.submit()} className="px-4 text-sm uppercase tracking-wide">
          Search
        </button>
      </div>
      {search.error ? <p role="alert" className="mt-2 text-sm">We could not load suggestions. Try again.</p> : null}
      {search.open ? (
        <ul {...search.listProps} aria-busy={search.loading} className="absolute inset-x-0 top-full z-10 bg-background shadow-lg">
          {search.options.map((option, index) => (
            <li key={option.id} {...search.optionProps(option, index)} className={index === search.activeIndex ? "bg-muted px-4 py-3" : "px-4 py-3"}>
              <span className="block">{option.label}</span>
              {option.detail ? <span className="block text-sm opacity-60">{option.detail}</span> : null}
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  )
}