import React, { useMemo } from 'react';
import classnames from 'classnames';
import { ACCENT_TYPES, Button } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { getPaginationLayout } from './utils';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
export function PagesButtons({
  pageCount,
  selectedPage,
  onPageSelect
}) {
  const layoutArray = useMemo(() => getPaginationLayout({
    selectedPage,
    pageCount
  }), [selectedPage, pageCount]);
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsx(_Fragment, {
    children: layoutArray.map((item, index, array) => {
      if (item === '...') {
        return /*#__PURE__*/_jsx("div", {
          className: "pagination-buttons-dots",
          children: "..."
        }, index);
      }
      return /*#__PURE__*/_jsx(Button, {
        accentType: ACCENT_TYPES.GHOST,
        onClick: () => {
          if (item !== selectedPage) {
            onPageSelect(item);
          }
        },
        "aria-current": item === selectedPage,
        "aria-label": t('Page {{number}}', {
          number: item + 1
        }),
        className: classnames('page-button', {
          active: item === selectedPage,
          first: index === 0,
          last: index === array.length - 1
        }),
        testId: `page-button-${item + 1}`,
        children: item + 1
      }, index);
    })
  });
}