import { useEffect } from 'react';
import classnames from 'classnames';
import useResizeObserver from "../../../../hooks/useResizeObserver/index.js";
import classes from './styles.module.scss';
const Span = function Span(props) {
  const {
    registerWidth,
    index,
    active,
    children
  } = props;
  const [ref, [width]] = useResizeObserver();
  useEffect(() => {
    registerWidth(index, width);
  }, [width, index, registerWidth]);
  return <span ref={ref} className={classnames(classes.span, {
    [classes.active]: active,
    [classes.first]: index === 0
  })} aria-hidden={active ? undefined : 'hidden'}>
      {children}
    </span>;
};
export default Span;