import React from 'react';
import classNames from 'classnames';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { Button, ACCENT_TYPES } from '../../../button';
import { useTranslation } from '../../../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Component contains buttons to change the step or skip tour.
 * */
export const AdvancedTourFooter = ({
  okayButtonText,
  className = '',
  stepNumber,
  totalSteps,
  onNextHandler,
  onPrevHandler,
  onSkipHandler,
  okayButtonClassName,
  nextTourButtonAriaLabel,
  previousTourButtonAriaLabel
}) => {
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('advanced-tour-footer', className),
    "test-id": "advanced-tour-footer",
    children: [/*#__PURE__*/_jsx(Button, {
      className: "direction-btn",
      onClick: onPrevHandler,
      accentType: ACCENT_TYPES.ROUND_ICON,
      leftIcon: faChevronLeft,
      isDisabled: stepNumber === 1,
      testId: "advanced-tour-prev-btn",
      "aria-label": previousTourButtonAriaLabel
    }), /*#__PURE__*/_jsx("div", {
      className: "steps-counter",
      "test-id": "advanced-tour-steps-counter",
      children: `${stepNumber}/${totalSteps}`
    }), /*#__PURE__*/_jsx(Button, {
      className: "direction-btn",
      onClick: onNextHandler,
      accentType: ACCENT_TYPES.ROUND_ICON,
      rightIcon: faChevronRight,
      isDisabled: stepNumber === totalSteps,
      testId: "advanced-tour-next-btn",
      "aria-label": nextTourButtonAriaLabel
    }), /*#__PURE__*/_jsx(Button, {
      className: classNames('skip-button', okayButtonClassName),
      onClick: onSkipHandler,
      accentType: ACCENT_TYPES.SECONDARY,
      testId: "advanced-tour-skip-btn",
      children: okayButtonText ?? t('Minimize')
    })]
  });
};