"use client";

import { PageSizeSelect } from "@/components/PageSizeSelect";
import { type PageSize } from "@/lib/pagination";

export function ListToolbar({
  query,
  onQueryChange,
  placeholder,
  pageSize,
  onPageSizeChange,
}: {
  query: string;
  onQueryChange: (value: string) => void;
  placeholder: string;
  pageSize: PageSize;
  onPageSizeChange: (next: PageSize) => void;
}) {
  return (
    <div className="mb-4 flex items-center justify-between gap-3">
      <div className="flex max-w-md flex-1 gap-2">
        <input
          type="search"
          value={query}
          onChange={(event) => onQueryChange(event.target.value)}
          placeholder={placeholder}
          className="min-w-0 flex-1 border border-neutral-800 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-100 outline-none focus:border-neutral-500"
        />
        {query ? (
          <button
            type="button"
            onClick={() => onQueryChange("")}
            className="border border-neutral-900 px-3 py-1.5 text-sm text-neutral-500 hover:text-neutral-300"
          >
            clear
          </button>
        ) : null}
      </div>
      <PageSizeSelect value={pageSize} onChange={onPageSizeChange} />
    </div>
  );
}