"use client";

import { PAGE_SIZE_OPTIONS, type PageSize } from "@/lib/pagination";

export function PageSizeSelect({
  value,
  onChange,
  options = PAGE_SIZE_OPTIONS,
}: {
  value: PageSize;
  onChange: (size: PageSize) => void;
  options?: readonly number[];
}) {
  return (
    <label className="inline-flex items-center gap-2 text-xs text-neutral-400">
      <span>per page</span>
      <select
        value={value}
        onChange={(e) => onChange(Number(e.target.value) as PageSize)}
        className="border border-neutral-800 bg-neutral-950 px-2 py-1 text-sm text-neutral-100 outline-none focus:border-neutral-500"
      >
        {options.map((n) => (
          <option key={n} value={n}>
            {n}
          </option>
        ))}
      </select>
    </label>
  );
}