import { ReactNode, useRef } from 'react';
import { StyledAnimatedText } from './styles/AnimatedText.styled';

interface IProps {
  children: ReactNode;
}

export default function AnimatedText(props: IProps) {
  const test = useRef<HTMLElement>(null);

  // useEffect(() => {
  //   console.log(test.current?.textContent);
  // }, [test]);

  return (
    <StyledAnimatedText>
      <span ref={test}>{props.children}</span>
      <span className="cursor"></span>
    </StyledAnimatedText>
  );
}