import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";

interface RowsPerPageProps {
  pageSize: number;
  onPageSizeChange: (pageSize: number) => void;
  options?: number[];
}

export function RowsPerPage({
  pageSize,
  onPageSizeChange,
  options = [5, 10, 15, 20]
}: RowsPerPageProps) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-sm text-muted-foreground">Hiển thị</span>
      <Select
        value={pageSize?.toString()}
        onValueChange={(value) => onPageSizeChange(Number(value))}>
        <SelectTrigger className="h-8 w-[70px]">
          <SelectValue placeholder={pageSize?.toString()} />
        </SelectTrigger>
        <SelectContent>
          {!options.includes(pageSize) && (
            <SelectItem value={pageSize?.toString()} disabled>
              {pageSize}
            </SelectItem>
          )}
          {options.map((option) => (
            <SelectItem key={option} value={option?.toString()}>
              {option}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <span className="text-sm text-muted-foreground">mục</span>
    </div>
  );
}