Icon Text Substitution

"use client";
 
import React, { useRef, useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
 
export interface IconTextSubstitutionProps
  extends React.HTMLAttributes<HTMLDivElement> {
  text: string;
  substitutions: {
    word: string;
    icon: React.ReactNode;
    animationStyle?: "bounce" | "pulse" | "rotate" | "shake" | "none";
    backgroundStyle?: "solid" | "gradient" | "glow" | "none";
    backgroundColor?: string;
    scale?: number;
    verticalOffset?: number;
  }[];
  textColor?: string;
  fontSize?: string;
  fontWeight?: string;
  enableHoverEffects?: boolean;
  enableAnimations?: boolean;
  animationSpeed?: number;
  inline?: boolean;
}
 
export function IconTextSubstitution({
  text,
  substitutions = [],
  textColor = "text-gray-200",
  fontSize = "text-2xl",
  fontWeight = "font-semibold",
  enableHoverEffects = true,
  enableAnimations = true,
  animationSpeed = 1,
  inline = false,
  className,
  ...props
}: IconTextSubstitutionProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [segments, setSegments] = useState<
    Array<{
      type: "text" | "icon";
      content: string | number;
      substitution?: any;
    }>
  >([]);
 
  useEffect(() => {
    const processedSegments: Array<{
      type: "text" | "icon";
      content: string | number;
      substitution?: any;
    }> = [];
    let remainingText = text;
    let lastIndex = 0;
 
    const sortedSubstitutions = [...substitutions].sort((a, b) => {
      const indexA = text.toLowerCase().indexOf(a.word.toLowerCase());
      const indexB = text.toLowerCase().indexOf(b.word.toLowerCase());
      return indexA - indexB;
    });
 
    sortedSubstitutions.forEach((sub) => {
      const wordIndex = remainingText
        .toLowerCase()
        .indexOf(sub.word.toLowerCase());
      if (wordIndex !== -1) {
        if (wordIndex > 0) {
          processedSegments.push({
            type: "text",
            content: remainingText.substring(0, wordIndex),
          });
        }
 
        processedSegments.push({
          type: "icon",
          content: processedSegments.length,
          substitution: sub,
        });
 
        remainingText = remainingText.substring(wordIndex + sub.word.length);
      }
    });
 
    if (remainingText) {
      processedSegments.push({
        type: "text",
        content: remainingText,
      });
    }
 
    setSegments(processedSegments);
  }, [text, substitutions]);
 
  const getAnimationVariant = (style: string = "none", speed: number = 1) => {
    const duration = 2 / speed;
 
    switch (style) {
      case "bounce":
        return {
          animate: {
            y: ["-5%", "0%", "-5%"],
            transition: {
              duration,
              repeat: Infinity,
              ease: "easeInOut",
            },
          },
        };
      case "pulse":
        return {
          animate: {
            scale: [1, 1.05, 1],
            opacity: [1, 0.8, 1],
            transition: {
              duration,
              repeat: Infinity,
              ease: "easeInOut",
            },
          },
        };
      case "rotate":
        return {
          animate: {
            rotate: [0, 10, 0, -10, 0],
            transition: {
              duration,
              repeat: Infinity,
              ease: "easeInOut",
            },
          },
        };
      case "shake":
        return {
          animate: {
            x: [0, 3, -3, 3, 0],
            transition: {
              duration: duration / 2,
              repeat: Infinity,
              ease: "easeInOut",
            },
          },
        };
      default:
        return {};
    }
  };
 
  const getBackgroundStyle = (style: string = "none", color?: string) => {
    switch (style) {
      case "solid":
        return {
          backgroundColor: color || "rgba(255, 255, 255, 0.1)",
          borderRadius: "0.5rem",
          padding: "0.25rem 0.5rem",
        };
      case "gradient":
        return {
          background: color
            ? `linear-gradient(135deg, ${color}, rgba(0,0,0,0.3))`
            : "linear-gradient(135deg, rgba(255,255,255,0.2), rgba(0,0,0,0.1))",
          borderRadius: "0.5rem",
          padding: "0.25rem 0.5rem",
        };
      case "glow":
        return {
          backgroundColor: "transparent",
          borderRadius: "0.5rem",
          padding: "0.25rem 0.5rem",
          boxShadow: color
            ? `0 0 10px ${color}`
            : "0 0 10px rgba(255, 255, 255, 0.5)",
        };
      default:
        return {};
    }
  };
 
  return (
    <div
      ref={containerRef}
      className={cn(
        inline ? "inline-flex items-center" : "flex flex-wrap items-center",
        inline ? "gap-0" : "gap-1",
        textColor,
        fontSize,
        fontWeight,
        className,
      )}
      {...props}
    >
      <AnimatePresence>
        {segments.map((segment, index) => {
          if (segment.type === "text") {
            return (
              <span key={`text-${index}`} className="inline-block">
                {segment.content}
              </span>
            );
          } else {
            const {
              icon,
              animationStyle,
              backgroundStyle,
              backgroundColor,
              scale = 1,
              verticalOffset = 0,
            } = segment.substitution;
            const animationVariant = getAnimationVariant(
              animationStyle,
              animationSpeed,
            );
            const bgStyle = getBackgroundStyle(
              backgroundStyle,
              backgroundColor,
            );
 
            return (
              <motion.div
                key={`icon-${segment.content}`}
                className={cn(
                  "inline-flex items-center justify-center",
                  enableHoverEffects && "transition-transform hover:scale-110",
                )}
                style={{
                  ...bgStyle,
                  transform: `scale(${scale})`,
                  position: "relative",
                  top: `${verticalOffset}px`,
                  margin: inline ? "0 1px" : undefined,
                }}
                whileHover={enableHoverEffects ? { scale: scale * 1.1 } : {}}
                {...(enableAnimations && animationStyle !== "none"
                  ? animationVariant
                  : {})}
              >
                {icon}
              </motion.div>
            );
          }
        })}
      </AnimatePresence>
    </div>
  );
}