import { Group, Select, Text } from "@mantine/core";

export const PAGE_SIZE_OPTIONS = ["5", "10", "25", "50"];

interface PageSizeSelectProps {
  value: number;
  onChange: (value: number) => void;
}

export function PageSizeSelect({ value, onChange }: PageSizeSelectProps) {
  return (
    <Group gap={6} wrap="nowrap">
      <Text size="sm" c="dimmed">Rows per page</Text>
      <Select
        data={PAGE_SIZE_OPTIONS}
        value={String(value)}
        onChange={(v) => v && onChange(Number(v))}
        size="xs"
        w={72}
        allowDeselect={false}
        checkIconPosition="right"
        comboboxProps={{ withinPortal: true }}
      />
    </Group>
  );
}