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 Default = (_: any) => (
  <I18NProvider t={(str: string) => str}>
    <Pagination>
      <PaginationLabel start={21} end={30} total={90}></PaginationLabel>
      <PaginationList>
        <PaginationListItem>
          <Link>
            <ChevronIcon direction="left" />
            Προηγούμενο
          </Link>
        </PaginationListItem>
        <PaginationListItem>
          <Link href="#page1">1</Link>
        </PaginationListItem>
        <PaginationListItem currentPage>2</PaginationListItem>
        <PaginationListItem>
          <Link href="#page3">3</Link>
        </PaginationListItem>
        <PaginationListItem variant="dots" />
        <PaginationListItem>
          <Link href="#page7">7</Link>
        </PaginationListItem>
        <PaginationListItem>
          <Link href="#page8">8</Link>
        </PaginationListItem>
        <PaginationListItem>
          <Link href="#page9">9</Link>
        </PaginationListItem>
        <PaginationListItem>
          <Link>
            Επόμενο
            <ChevronIcon direction="right" />
          </Link>
        </PaginationListItem>
      </PaginationList>
    </Pagination>

    <SectionBreak size="lg" />

    <Pagination>
      <PaginationLabel start={81} end={90} total={197}></PaginationLabel>
      <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>
);

export default Default;