import React, { useRef } from "react";
import { motion, useInView } from "framer-motion";

const splitText = (text) =>
  (text || "")
    .toString()
    .split("")
    .map((char, index) => ({
      char,
      key: `${char}-${index}`,
    }));

const Heading = ({
  el: Wrapper = "h2",
  subheading = "",
  heading = "",
  className = "",
  isHtml = false, // ✅ added
}) => {
  // ✅ IF HTML → render directly
  if (isHtml) {
    return (
      <div className={`headings mb-4 ${className}`}>
        {subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
        <Wrapper
          className="heading"
          dangerouslySetInnerHTML={{ __html: heading }}
        />
      </div>
    );
  }

  // ⬇️ Existing animation logic (unchanged)
  const headingArray = Array.isArray(heading) ? heading : [heading];

  const headingVariants = {
    hidden: { opacity: 0.2, y: 0 },
    visible: (i) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.05,
      },
    }),
  };

  return (
    <div className={`headings mb-4 ${className}`}>
      <Wrapper className="subheading">{subheading}</Wrapper>
      <div className="heading-container">
        {headingArray.map((item, index) => (
          <InViewWrapper key={index}>
            {splitText(item).map((char, i) => (
              <motion.span
                key={char.key}
                custom={i}
                initial="hidden"
                animate="visible"
                variants={headingVariants}
                className="heading"
                style={{ display: "inline-block" }}
              >
                {char.char === " " ? "\u00A0" : char.char}
              </motion.span>
            ))}
          </InViewWrapper>
        ))}
      </div>
    </div>
  );
};

const InViewWrapper = ({ children }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { triggerOnce: true, threshold: 0.1 });

  return (
    <div ref={ref}>
      {React.Children.map(children, (child) =>
        React.cloneElement(child, {
          animate: isInView ? "visible" : "hidden",
        })
      )}
    </div>
  );
};

export default Heading;