/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import ArrowLeft from '../icon/arrow-left.js';
import ArrowRight from '../icon/arrow-right.js';
import Check from '../icon/check.js';
import { Button, KIND, SHAPE } from '../button/index.js';
import { useStyletron } from '../styles/index.js';
export function HelperSteps({
  index,
  length,
  onFinish,
  onPrev,
  onNext
}) {
  const [css, theme] = useStyletron();
  const isLast = index === length - 1;
  return /*#__PURE__*/React.createElement("div", {
    className: css({
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'space-between'
    })
  }, /*#__PURE__*/React.createElement(Button, {
    disabled: index === 0,
    kind: KIND.secondary,
    onClick: onPrev,
    shape: SHAPE.circle
  }, /*#__PURE__*/React.createElement(ArrowLeft, {
    size: 20
  })), /*#__PURE__*/React.createElement("div", {
    className: css({
      display: 'flex'
    })
  }, new Array(length).fill().map((_, i) => {
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      className: css({
        height: '8px',
        width: '8px',
        backgroundColor: i === index ? theme.colors.contentPrimary : theme.colors.backgroundTertiary,
        borderTopLeftRadius: '50%',
        borderTopRightRadius: '50%',
        borderBottomRightRadius: '50%',
        borderBottomLeftRadius: '50%',
        ':not(:last-child)': {
          marginRight: '8px'
        }
      })
    });
  })), /*#__PURE__*/React.createElement(Button, {
    kind: isLast ? KIND.primary : KIND.secondary,
    onClick: isLast ? onFinish : onNext,
    shape: SHAPE.circle
  }, isLast ? /*#__PURE__*/React.createElement(Check, {
    size: 20
  }) : /*#__PURE__*/React.createElement(ArrowRight, {
    size: 20
  })));
}