import { useAnimateDataChange } from "../../../hooks/election/index.js";
import classes from './styles.module.scss';

/**
 * Utility wrapper component that animates a string value
 * when it changes, wraps the string in an `inline-block` span,
 * because flip transform we apply doesn't work on `inline` elements.
 */
const DataAnimation = function DataAnimation(props) {
  const {
    trigger
  } = props;
  const [animationRef, displayValue] = useAnimateDataChange({
    trigger
  });
  if (trigger === undefined) {
    return null;
  }
  return <span className={classes.container} ref={animationRef}>
      {displayValue}
    </span>;
};
export default DataAnimation;