import * as React from 'react';

import { Button } from '@lightspeed/flame/Button';
import { Group } from '@lightspeed/flame/Group';
import { Flex, Box } from '@lightspeed/flame/Core';
import { IconSmallChevronLeft } from '@lightspeed/flame/Icon/SmallChevronLeft';
import { IconSmallChevronRight } from '@lightspeed/flame/Icon/SmallChevronRight';

interface Props {
  isFirst?: boolean;
  isLast?: boolean;
  handleNext?: () => void;
  handlePrevious?: () => void;
}
const Pager: React.FC<Props> = ({ isFirst, isLast, handleNext, handlePrevious, children }) => (
  <Flex alignItems="center" opacity={1}>
    {children && <Box pr={2}>{children}</Box>}
    <Group noSpacing>
      <Button disabled={isFirst} onClick={handlePrevious} data-testid="table-pager-previous">
        <IconSmallChevronLeft />
      </Button>
      <Button disabled={isLast} onClick={handleNext} data-testid="table-pager-next">
        <IconSmallChevronRight />
      </Button>
    </Group>
  </Flex>
);

export default Pager;