import React from 'react';
import { Box, MainButton, Pagination } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';

type PaginationContainerProps = {
  onSelectPage: (page: number) => void;
  onButtonClick?: () => void;
  isCondensedView: boolean;
  buttonText: string;
  total: number;
  page: number;
  perPage: number;
  color: MainColorType;
};

const PaginationContainer = ({
  onSelectPage,
  page,
  perPage,
  total,
  color,
  buttonText,
  onButtonClick,
  isCondensedView,
}: PaginationContainerProps) => {
  return (
    <Box marginBottom={5}>
      {isCondensedView && total > perPage && (
        <Box marginTop={2}>
          <MainButton colorScheme={color} text={buttonText} onClick={onButtonClick} />
        </Box>
      )}
      {isCondensedView && (
        <Box marginTop={3} display="flex" justifyContent="center" alignItems="center">
          <Pagination
            currentPage={page}
            color={color}
            onNext={() => onSelectPage(page + 1)}
            onPage={(num) => onSelectPage(num)}
            onPrev={() => onSelectPage(page - 1)}
            pages={total > perPage ? Math.ceil(total / perPage) : 1}
          />
        </Box>
      )}
    </Box>
  );
};

export default PaginationContainer;