import React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { __ } from "@wordpress/i18n";

/**
 * PerPageSelector component for selecting number of items per page
 */
export const PerPageSelector = ({ perPage, onPerPageChange, options = [5, 10, 25, 50], className = "" }) => {
	return (
		<div className={`flex items-center gap-2 ${className}`}>
			<span className="text-sm text-gray-700 whitespace-nowrap">{__("Show", "socialpoll")}</span>
			<Select value={perPage.toString()} onValueChange={(value) => onPerPageChange(parseInt(value))}>
				<SelectTrigger className="w-20">
					<SelectValue />
				</SelectTrigger>
				<SelectContent>
					{options.map((option) => (
						<SelectItem key={option} value={option.toString()}>
							{option}
						</SelectItem>
					))}
				</SelectContent>
			</Select>
			<span className="text-sm text-gray-700 whitespace-nowrap">{__("per page", "socialpoll")}</span>
		</div>
	);
};

export default PerPageSelector;