import React from 'react';
import { Pagination, PaginationProps } from 'antd';
import { useTranslation } from 'react-i18next';
import './index.css';

export interface AppPaginationProps extends PaginationProps {
  total: number;
}

export default function AppPagination(props: AppPaginationProps) {
  const { t } = useTranslation();
  const { className, showSizeChanger, ...restProps } = props;
  const mergedClassName = ['app-global-pagination', className].filter(Boolean).join(' ');
  const mergedShowSizeChanger =
    showSizeChanger === undefined || showSizeChanger === true
      ? { showSearch: false }
      : showSizeChanger;

  return (
    <div className="app-pagination-container">
      <Pagination
        className={mergedClassName}
        showSizeChanger={mergedShowSizeChanger}
        showQuickJumper
        showTotal={(total) => t('common.total', { total })}
        pageSizeOptions={['8','10', '20', '50', '100']}
        size="default"
        {...restProps}
      />
    </div>
  );
}