import React from 'react';

import { I18NProvider } from '@digigov/ui/i18n';
import { ChevronIcon } from '@digigov/ui/icons';
import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
import { Link } from '@digigov/ui/navigation/Link';
import {
  Pagination,
  PaginationList,
  PaginationListItem,
  PaginationLabel,
} from '@digigov/ui/navigation/Pagination';

export const PaginationSmall = (_: any) => (
  <I18NProvider t={(str: string) => str}>
    <Pagination>
      <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
      <PaginationList>
        <PaginationListItem active={false}>
          <Link>
            <ChevronIcon direction="left" />
          </Link>
        </PaginationListItem>
        <PaginationListItem currentPage>1</PaginationListItem>

        <PaginationListItem>
          <Link href="#page2">2</Link>
        </PaginationListItem>

        <PaginationListItem>
          <Link>
            <ChevronIcon direction="right" />
          </Link>
        </PaginationListItem>
      </PaginationList>
    </Pagination>
    <SectionBreak size="lg" />
  </I18NProvider>
);

export default PaginationSmall;