Wave Text

'use client';

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

interface WaveTextProps {
  text: string;
  className?: string;
  amplitude?: number;
  frequency?: number;
  speed?: number;
  direction?: 'up' | 'down' | 'both';
  trigger?: 'mount' | 'hover' | 'inView' | 'continuous';
  duration?: number;
}

export const WaveText = ({
  text,
  className = '',
  amplitude = 20,
  frequency = 0.3,
  speed = 2,
  direction = 'both',
  trigger = 'continuous',
  duration = 3,
}: Readonly<WaveTextProps>) => {
  const containerRef = useRef<HTMLSpanElement>(null);
  const isInView = useInView(containerRef, { once: false, amount: 0.5 });
  const [isHovering, setIsHovering] = useState(false);
  const [hasTriggered, setHasTriggered] = useState(false);

  const shouldAnimate = () => {
    switch (trigger) {
      case 'continuous':
        return true;
      case 'mount':
        return true;
      case 'inView':
        return isInView;
      case 'hover':
        return isHovering;
      default:
        return false;
    }
  };

  useEffect(() => {
    if (trigger === 'mount' && !hasTriggered) {
      setHasTriggered(true);
    }
  }, [trigger, hasTriggered]);

  const characters = text.split('');

  const getYAnimation = (index: number) => {
    const baseY = Math.sin(index * frequency) * amplitude;

    if (direction === 'up') {
      return [0, -Math.abs(baseY), 0];
    } else if (direction === 'down') {
      return [0, Math.abs(baseY), 0];
    } else {
      return [0, baseY, 0, -baseY, 0];
    }
  };

  return (
    <motion.span
      ref={containerRef}
      className={`inline-block ${className}`}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      {characters.map((char, index) => (
        <motion.span
          key={`${char}-${index}`}
          className="inline-block"
          style={{
            whiteSpace: char === ' ' ? 'pre' : 'normal',
          }}
          animate={
            shouldAnimate() && char !== ' '
              ? {
                  y: getYAnimation(index),
                }
              : {}
          }
          transition={
            shouldAnimate()
              ? {
                  duration: speed,
                  ease: 'easeInOut',
                  repeat: trigger === 'continuous' ? Infinity : 0,
                  repeatType: 'loop',
                  delay: index * (frequency / 2),
                }
              : {}
          }
        >
          {char}
        </motion.span>
      ))}
    </motion.span>
  );
};

export default WaveText;