Text Effect Configurable

import type { ReactNode, ElementType } from "react";
import { cn } from "~/lib/utils";

interface TextEffectConfigurableProps {
  children: ReactNode;
  as?: ElementType;
  effect?: "fade" | "blur" | "slide" | "scale" | "rotate";
  delay?: number;
  duration?: number;
  className?: string;
}

// Function to extract text from React children recursively
function extractTextFromChildren(children: ReactNode): string {
  if (typeof children === "string") {
    return children;
  }

  if (typeof children === "number") {
    return String(children);
  }

  if (Array.isArray(children)) {
    return children.map(extractTextFromChildren).join("");
  }

  if (children && typeof children === "object" && "props" in children) {
    // If it's a React element, try to extract text from its children
    return extractTextFromChildren((children as { props: { children: ReactNode } }).props.children);
  }

  return "";
}

export function TextEffectConfigurable({
  children,
  as: Component = "div",
  effect = "fade",
  delay = 0.05,
  duration = 0.6,
  className = "",
}: TextEffectConfigurableProps) {
  // Convert children to string using our extraction function
  const text = extractTextFromChildren(children);

  const getAnimationClass = () => {
    switch (effect) {
      case "blur":
        return "animate-blur-in";
      case "slide":
        return "animate-slide-up";
      case "scale":
        return "animate-scale-in";
      case "rotate":
        return "animate-rotate-in";
      default:
        return "animate-fade-in";
    }
  };

  const getInitialClasses = () => {
    switch (effect) {
      case "blur":
        return "blur-sm opacity-0";
      case "slide":
        return "opacity-0 translate-y-0";
      case "scale":
        return "opacity-0 scale-none";
      case "rotate":
        return "opacity-0";
      default:
        return "opacity-0";
    }
  };

  const animatedContent = text.split("").map((char, index) => (
    <span
      key={index}
      className={cn("inline-block", getInitialClasses(), getAnimationClass())}
      style={{
        animationDelay: `${index * delay}s`,
        animationDuration: `${duration}s`,
        animationFillMode: "forwards",
      }}
    >
      {char === " " ? "\u00A0" : char}
    </span>
  ));

  const renderElement = () => {
    const commonProps = {
      className: cn("text-3xl font-bold text-white", className),
    };

    switch (Component) {
      case "h1":
        return <h1 {...commonProps}>{animatedContent}</h1>;
      case "h2":
        return <h2 {...commonProps}>{animatedContent}</h2>;
      case "h3":
        return <h3 {...commonProps}>{animatedContent}</h3>;
      case "h4":
        return <h4 {...commonProps}>{animatedContent}</h4>;
      case "h5":
        return <h5 {...commonProps}>{animatedContent}</h5>;
      case "h6":
        return <h6 {...commonProps}>{animatedContent}</h6>;
      case "p":
        return <p {...commonProps}>{animatedContent}</p>;
      case "span":
        return <span {...commonProps}>{animatedContent}</span>;
      case "blockquote":
        return <blockquote {...commonProps}>{animatedContent}</blockquote>;
      case "strong":
        return <strong {...commonProps}>{animatedContent}</strong>;
      case "em":
        return <em {...commonProps}>{animatedContent}</em>;
      default:
        return <div {...commonProps}>{animatedContent}</div>;
    }
  };

  return renderElement();
}