import React, { ReactNode } from 'react';
import cx from 'classnames';

type SupportedDotColors = 'selected' | 'primary' | 'primary-dark';

interface Props {
  children: ReactNode;
  striped?: boolean;
  color: SupportedDotColors;
}

const mapColorToClass = (color: SupportedDotColors) => {
  switch (color) {
    case 'selected': 
      return 'u-bg-color--selected';
    case 'primary': 
      return 'u-bg-color--primary';
    case 'primary-dark': 
      return 'u-bg-color--primary-dark';
    default: 
      return '';
  }
};

const Dot = ({ children, striped, color }: Props) => (
  <div className="u-display--inline-flex u-align-items-center">
    <div className={cx('c-dot u-margin-right--medium', { 'c-dot--striped': striped }, mapColorToClass(color))} />
    {children}
  </div>
);

export { Dot };