import cx from "../../../../../utils/css/cx.js";
import useA11yOnClick from "../../../../../hooks/useA11yOnClick/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Dot = function Dot(props) {
  const {
    idx,
    selectedCardIndex,
    setSelectedCardIndex,
    clearAutoRotate
  } = props;
  const onClickProps = useA11yOnClick(() => {
    clearAutoRotate();
    setSelectedCardIndex(idx);
  }, [setSelectedCardIndex, selectedCardIndex]);
  return <div className={cls('dot', {
    selected: idx === selectedCardIndex
  })} {...onClickProps} />;
};
export default Dot;