import React, { Fragment, ReactElement, ReactFragment } from 'react';
import classnames from 'classnames';
import './ProgressDots.scss';

interface Props {
  currentDot: string;
  dots: string[];
}

export const ProgressDots = (props: Props): ReactElement<HTMLDivElement> => {
  const dot = (name: string): ReactElement<ReactFragment> => (
    <Fragment key={name}>
      <span
        className={classnames('mo-display-progress-dots__dot', {
          'mo-display-progress-dots__dot--active': props.currentDot === name,
        })}
        data-label={name}
      />
      <hr />
    </Fragment>
  );

  return (
    <div className="mo-display-progress-dots">
      {props.dots.map((name: string) => dot(name))}
    </div>
  );
};