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