import React, { FC, useState, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';

interface AnimatedTextProps {
  text: string;
}

/**
 * Character-by-character scroll-reveal text animation.
 * Uses Framer Motion's useScroll hook.
 */
export const AnimatedText: FC<AnimatedTextProps> = ({ text }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  if (!containerRef) return <span>{text}</span>;

  return (
    <motion.div
      ref={containerRef}
      className="inline-block"
    >
      {text.split('').map((char, index) => (
        <span
          key={index}
          className="inline-block transition-opacity duration-500"
          style={{ opacity: 0.2 }} // Initial low opacity
        >
          {char === ' ' ? '\u00A0' : char} {/* Use non-breaking space for spaces */}
        </span>
      ))}
    </motion.div>
  );
};