import { FC } from 'react';
import { Container, Row } from 'components/layout';
import { Text } from 'components/text';
import { Button } from 'components/button';
import { ChevronLeft, ChevronRight } from 'icons';

export const PaginationRight: FC<PaginationRightProps> = ({ totalPages, pageStart, pageEnd }) => {
  return (
    <Row alignItems="center">
      <Row mx="m">
        <Text variant="body" color="title">
          {pageStart}
        </Text>
        <Text variant="body" color="title">
          -
        </Text>
        <Text variant="body" color="title">
          {pageEnd}
        </Text>
        <Text mx="3xs" variant="body" color="title">
          of
        </Text>
        <Text variant="body" color="title">
          {totalPages}
        </Text>
      </Row>
      <Button
        sizeVariant="medium"
        titleColor="title"
        borderColorVariant="divider"
        variant="outline"
        title="Prev"
        leftElement={<ChevronLeft colorVariant="divider" height={12} width={12} />}
      />
      <Container mx="2xs" />
      <Button
        sizeVariant="medium"
        titleColor="title"
        borderColorVariant="divider"
        variant="outline"
        title="Next"
        rightElement={<ChevronRight colorVariant="divider" height={12} width={12} />}
      />
    </Row>
  );
};
export interface PaginationRightProps {
  totalPages: number;
  pageStart: number;
  pageEnd: number;
}