'use client';

import { useRouter } from 'next/navigation';
import { Search } from 'lucide-react';
import { useState } from 'react';

/** Compact header search; the full search experience lives at /search (owned by the search module). */
export function HeaderSearch() {
  const router = useRouter();
  const [q, setQ] = useState('');
  return (
    <form
      role="search"
      className="relative hidden items-center md:flex"
      onSubmit={(e) => {
        e.preventDefault();
        const query = q.trim();
        if (query) router.push(`/search?q=${encodeURIComponent(query)}`);
      }}
    >
      <Search className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-subtle" />
      <input
        type="search"
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder="Search cards, watches, games, sneakers, LEGO…"
        className="h-8 w-64 rounded-md border border-border bg-sunken pl-8 pr-2 text-[13px] text-fg placeholder:text-subtle focus:w-80 focus:border-border-strong focus:outline-none transition-[width] xl:w-80 xl:focus:w-96"
        aria-label="Search collectibles"
      />
    </form>
  );
}