import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { Pagination } from '.';

const css = styled.div;

const Style = css`
   background: white !important;

   .max-width-120 {
      max-width: 120px;
      overflow: auto;
      padding: 10px 20px;
   }
`;

storiesOf('Components/Pagination', module).add('with default', () => {
   const [currentPage, setCurrentPage] = useState(1);

   return (
      <Style>
         <Pagination
            total={20}
            perPage={2}
            currentPage={currentPage}
            changePage={(page: number) => {
               setCurrentPage(page);
            }}
         />
      </Style>
   );
});
