'use client';

import * as React from 'react';

import { cn } from '@/utils/cn';

type BlurTextProps = {
  text?: string;
  delay?: number;
  className?: string;
  animateBy?: 'words' | 'letters';
  direction?: 'top' | 'bottom';
  threshold?: number;
  rootMargin?: string;
  onAnimationComplete?: () => void;
  stepDuration?: number;
};

export default function BlurText({
  text = '',
  delay = 80,
  className,
  animateBy = 'words',
  direction = 'top',
  threshold = 0.1,
  rootMargin = '0px',
  onAnimationComplete,
  stepDuration = 0.35,
}: BlurTextProps) {
  const elements = React.useMemo(
    () => (animateBy === 'words' ? text.split(' ') : text.split('')),
    [animateBy, text],
  );
  const [inView, setInView] = React.useState(false);
  const ref = React.useRef<HTMLParagraphElement>(null);

  React.useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.unobserve(element);
        }
      },
      { threshold, rootMargin },
    );

    observer.observe(element);
    return () => observer.disconnect();
  }, [rootMargin, threshold]);

  return (
    <p ref={ref} className={cn('flex flex-wrap', className)}>
      {elements.map((segment, index) => (
        <span
          key={`${segment}-${index}`}
          onTransitionEnd={
            inView && index === elements.length - 1
              ? onAnimationComplete
              : undefined
          }
          style={{
            transitionDelay: `${(index * delay) / 1000}s`,
            transitionDuration: `${stepDuration}s`,
          }}
          className={cn(
            'inline-block opacity-0 blur-md transition-[opacity,filter,transform] ease-out will-change-[transform,filter,opacity]',
            direction === 'top' ? '-translate-y-8' : 'translate-y-8',
            inView && 'blur-0 translate-y-0 opacity-100',
          )}
        >
          {segment === ' ' ? '\u00A0' : segment}
          {animateBy === 'words' && index < elements.length - 1
            ? '\u00A0'
            : null}
        </span>
      ))}
    </p>
  );
}