'use client';
import { ReactNode } from 'react';
import useInView from '@/hooks/useInView';

interface AnimatedTextProps {
  children: ReactNode;
  className?: string;
  startClass?: string;
  finishClass?: string;
  threshold?: number;
}

export function AnimatedText({
  children,
  className = '',
  startClass,
  finishClass,
  threshold,
}: AnimatedTextProps) {
  const [ref, isVisible] = useInView({
    threshold: threshold ?? 0.1,
    triggerOnce: true,
  });

  return (
    <div
      ref={ref}
      className={`transition-[opacity, transform] ease-out duration-1000 ${
        isVisible ? 'opacity-100' : 'opacity-0'
      }  ${isVisible ? finishClass : startClass}  ${className}`}
    >
      {children}
    </div>
  );
}