import React from 'react';
import { Box, Flexbox } from '../../../index';
import ChevronIcon from './components/ChevronIcon';
import { StyledButton } from './components/CompactComponents';
var ChevronButton = function ChevronButton(_ref) {
  var direction = _ref.direction,
    onClick = _ref.onClick,
    label = _ref.label;
  return React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center"
  }, React.createElement(StyledButton, {
    onClick: onClick,
    variant: "neutral",
    "aria-label": label,
    $direction: direction
  }, React.createElement(ChevronIcon, {
    direction: direction,
    size: 16,
    inline: true
  })));
};
var Compact = function Compact(_ref2) {
  var currentPage = _ref2.currentPage,
    numberOfPages = _ref2.numberOfPages,
    onClickPrevious = _ref2.onClickPrevious,
    onClickNext = _ref2.onClickNext,
    previousPageLabel = _ref2.previousPageLabel,
    nextPageLabel = _ref2.nextPageLabel;
  return React.createElement(Flexbox, {
    container: true,
    gap: 1
  }, currentPage !== 1 && React.createElement(ChevronButton, {
    direction: "left",
    onClick: onClickPrevious,
    label: previousPageLabel
  }), currentPage !== numberOfPages && React.createElement(Box, {
    ml: currentPage <= 1 ? 9 : 0
  }, React.createElement(ChevronButton, {
    direction: "right",
    onClick: onClickNext,
    label: nextPageLabel
  })));
};
export default React.memo(Compact);