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 mergedClassName = ['app-global-pagination', props.className].filter(Boolean).join(' ');

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