import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';

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

/**
 * Per-page selector for admin list pages.
 * Place in the filter row alongside search and other filters.
 */
export function PerPageSelector({
  value,
  onChange,
  options = [10, 25, 50, 100],
}: PerPageSelectorProps) {
  return (
    <div className="flex items-center gap-2 text-sm text-muted-foreground">
      <span>Show</span>
      <Select value={String(value)} onValueChange={(v) => onChange(Number(v))}>
        <SelectTrigger className="w-20 h-8">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {options.map((n) => (
            <SelectItem key={n} value={String(n)}>
              {n}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <span>per page</span>
    </div>
  );
}