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

export default WithInactiveValues;
