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

const DEFAULT_PAGE_SIZE_OPTIONS = ["10", "25", "50", "100"];

type TablePaginationFooterProps = {
  total: number;
  page: number;
  totalPages: number;
  pageSize: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (pageSize: number) => void;
  pageSizeOptions?: string[];
};

// Shared list footer: rows-per-page selector + page navigator.
const TablePaginationFooter: React.FC<TablePaginationFooterProps> = ({
  total,
  page,
  totalPages,
  pageSize,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
}) => {
  if (total <= 0) return null;

  return (
    <Group justify="space-between" mt="md" align="center">
      <Group gap="xs" align="center">
        <Select
          size="sm"
          variant="filled"
          w={90}
          value={String(pageSize)}
          onChange={(v) => onPageSizeChange(Number(v) || pageSize)}
          data={pageSizeOptions}
          allowDeselect={false}
          searchable={false}
          aria-label="Entries per page"
        />
        <Text size="sm" c="dimmed">
          Entries per page
        </Text>
      </Group>
      {totalPages > 1 && (
        <Pagination
          value={page}
          onChange={onPageChange}
          total={totalPages}
          size="sm"
        />
      )}
    </Group>
  );
};

export default TablePaginationFooter;