import { searchBarText } from '@/lib/i18n/shell'

/**
 * Der Suchbalken in der Kopfzeile.
 *
 * Ein gewöhnliches Formular, das die Anfrage an `/suche` übergibt — kein
 * Skript, kein Zustand, keine Bytes im Bündel. Die eigentliche Suche mit
 * Filtern, Facetten und Abbruch laufender Anfragen sitzt auf der Suchseite,
 * hier steht nur das Eingangstor.
 *
 * Strg+K bleibt daneben bestehen: der Balken ist zum Recherchieren da, die
 * Palette zum Springen.
 */
export function SearchBar({ defaultValue }: { defaultValue?: string }) {
  return (
    <form action="/suche" method="get" role="search" className="relative">
      <label htmlFor="kopfsuche" className="sr-only">
        {searchBarText.label}
      </label>
      <span aria-hidden className="absolute top-1/2 left-3 -translate-y-1/2 text-text-dim">
        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor">
          <circle cx="7" cy="7" r="4.5" strokeWidth="1.5" />
          <path d="M10.5 10.5 14 14" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      </span>
      <input
        id="kopfsuche"
        type="search"
        name="q"
        defaultValue={defaultValue}
        placeholder={searchBarText.placeholder}
        className="field field-pill w-56 py-1 pl-8 text-xs"
      />
    </form>
  )
}