'use client';

// Small client component for the per-category search box. Updates the
// URL with ?q=... so the server component re-renders the filtered
// list. Kept separate so the page itself stays a server component.

import { useRouter } from 'next/navigation';
import { FormEvent, useState } from 'react';

export function CategorySearchBar({ slug, initial }: { slug: string; initial: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initial);

  function onSubmit(e: FormEvent) {
    e.preventDefault();
    const term = q.trim();
    if (term) router.push(`/categories/${slug}?q=${encodeURIComponent(term)}`);
    else router.push(`/categories/${slug}`);
  }

  return (
    <form onSubmit={onSubmit} className="card flex items-center gap-2 p-2">
      <input
        type="search"
        className="input border-0 shadow-none focus:ring-0"
        placeholder="Search within this category..."
        value={q}
        onChange={(e) => setQ(e.target.value)}
      />
    </form>
  );
}