import React from 'react';

import { LabelContainer } from '@digigov/react-core/LabelContainer';
import {
  SelectContainer,
  SelectOption,
} from '@digigov/ui/form/SelectContainer';
import { I18NProvider } from '@digigov/ui/i18n';
import { ChevronIcon } from '@digigov/ui/icons';
import { Link } from '@digigov/ui/navigation/Link';
import {
  Pagination,
  PaginationList,
  PaginationListItem,
  PaginationLabel,
} from '@digigov/ui/navigation/Pagination';

export const PaginationWithSmallFont = (_: any) => (
  <div className="example">
    <I18NProvider t={(str: string) => str}>
      <Pagination size="sm">
        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
        <LabelContainer>
          Αποτελέσματα ανά σελίδα
          <SelectContainer>
            <SelectOption>5</SelectOption>
            <SelectOption>10</SelectOption>
            <SelectOption>15</SelectOption>
          </SelectContainer>
        </LabelContainer>
        <PaginationList>
          <PaginationListItem>
            <Link>
              <ChevronIcon direction="left" />
              Προηγούμενο
            </Link>
          </PaginationListItem>
          <PaginationListItem>
            <Link href="#page1">1</Link>
          </PaginationListItem>
          <PaginationListItem variant="dots"></PaginationListItem>
          <PaginationListItem>
            <Link href="#page7">7</Link>
          </PaginationListItem>
          <PaginationListItem currentPage>8</PaginationListItem>
          <PaginationListItem>
            <Link href="#page9">9</Link>
          </PaginationListItem>
          <PaginationListItem variant="dots"></PaginationListItem>
          <PaginationListItem>
            <Link href="#page20">20</Link>
          </PaginationListItem>
          <PaginationListItem>
            <Link>
              Επόμενο
              <ChevronIcon direction="right" />
            </Link>
          </PaginationListItem>
        </PaginationList>
      </Pagination>
    </I18NProvider>
  </div>
);

export default PaginationWithSmallFont;