import { Search } from 'lucide-react';
import { cn } from '@/lib/cn';

/** Plain GET form — works without JavaScript; the ⌘K dialog is the enhanced path. */
export function SearchForm({ q, className, autoFocus = false }: { q: string; className?: string; autoFocus?: boolean }) {
  return (
    <form action="/search" method="get" role="search" className={cn('flex gap-2', className)}>
      <label className="flex h-12 min-w-0 flex-1 items-center gap-2 rounded-md border border-rule bg-plane-2/70 px-3 focus-within:border-rule-strong">
        <Search className="size-4 shrink-0 text-ink-3" aria-hidden />
        <span className="sr-only">Search query</span>
        <input
          type="search"
          name="q"
          defaultValue={q}
          placeholder="Satellite, NORAD, COSPAR, operator, constellation, country…"
          className="min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"
          autoComplete="off"
          spellCheck={false}
          autoFocus={autoFocus}
          maxLength={120}
        />
      </label>
      <button type="submit" className="h-12 shrink-0 rounded-md bg-accent px-4 text-sm font-semibold text-accent-ink hover:brightness-110">
        Search
      </button>
    </form>
  );
}