import cx from 'classnames';
import React from 'react';

import css from './dot-indicator.module.css';

export interface IDotIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
  color?: 'primary';
  size?: 'md';
}

function DotIndicator({ color, className, size, ...domAttrs }: IDotIndicatorProps) {
  const cn = cx(
    className,
    css.base,
    color && css[`color-${color}`],
    size && css[`size-${size}`],
  );

  return <div className={cn} {...domAttrs} />;
}

DotIndicator.defaultProps = {
  color: 'primary',
  size: 'md',
};

export default DotIndicator;