"use client";

interface PaginationDropdownProps {
  value: number;
  onChange: (value: number) => void;
  options?: number[];
}

export default function PaginationDropdown({
  value,
  onChange,
  options = [10, 20, 50, 100],
}: PaginationDropdownProps) {
  return (
    <div className="flex items-center gap-2">
      <label htmlFor="per-page" className="text-sm text-zinc-400">
        Per page:
      </label>
      <select
        id="per-page"
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm text-zinc-200 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
      >
        {options.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
    </div>
  );
}