import React from 'react';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
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 TourFooter = ({
  skipButtonText,
  stepNumber,
  totalSteps,
  onCompleteHandler,
  onNextHandler,
  onPrevHandler,
  onSkipHandler
}) => {
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsxs("div", {
    className: "tour-footer",
    "test-id": "tour-footer",
    children: [/*#__PURE__*/_jsx(Button, {
      className: "tour-footer-skip-btn",
      onClick: () => onSkipHandler(stepNumber),
      accentType: ACCENT_TYPES.GHOST,
      testId: "tour-skip-btn",
      children: skipButtonText ?? t('Skip tour')
    }), /*#__PURE__*/_jsx(Button, {
      className: "tour-footer-direction-btn",
      onClick: onPrevHandler,
      accentType: ACCENT_TYPES.ROUND_ICON,
      leftIcon: faChevronLeft,
      isDisabled: stepNumber === 1,
      testId: "tour-prev-btn",
      "aria-label": t('previous')
    }), /*#__PURE__*/_jsx("div", {
      "test-id": "tour-steps-counter",
      children: `${stepNumber}/${totalSteps}`
    }), /*#__PURE__*/_jsx(Button, {
      className: "tour-footer-direction-btn",
      onClick: stepNumber === totalSteps ? onCompleteHandler : onNextHandler,
      accentType: ACCENT_TYPES.ROUND_ICON,
      rightIcon: stepNumber === totalSteps ? faCheck : faChevronRight,
      testId: "tour-next-btn",
      "aria-label": t('next')
    })]
  });
};