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

export default function PaginationControl({
  page,
  pageSize,
  onPageChange,
  onPageSizeChange,
  hasNextPage,
  hasPrevPage,
}) {
  const pageSizeValue = pageSize ? String(pageSize) : "10"; // 兜底，避免 undefined

  return (
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 16 }}>
      <Select
        data={["5", "10", "20", "50"]}
        value={pageSizeValue}
        onChange={(val) => {
          if (val) onPageSizeChange(Number(val));
        }}
        style={{ width: 100 }}
      />
      <Group>
        <Button
          variant="default"
          disabled={!hasPrevPage}
          onClick={() => onPageChange(page - 1)}
        >
          上一页
        </Button>
        <Text size="sm" style={{ minWidth: 60, textAlign: "center" }}>
          第 {page} 页
        </Text>
        <Button
          variant="default"
          disabled={!hasNextPage}
          onClick={() => onPageChange(page + 1)}
        >
          下一页
        </Button>
      </Group>
    </div>
  );
}
