import React, { useEffect, useState } from "react";

export type TypingHeadlineProps = {
  /** Array of taglines to rotate through */
  taglines?: string[];
  /** Additional className to apply to the h2 */
  className?: string;
  /** Whether to keep looping through taglines */
  loop?: boolean;
  /** ms per character when typing */
  typingSpeed?: number;
  /** ms per character when deleting */
  deletingSpeed?: number;
  /** pause (ms) after a tagline is fully typed before deleting */
  pause?: number;
};

/**
 * TypingHeadline
 * ----------------
 * A small, self-contained React + TypeScript component that types and deletes
 * multiple taglines in sequence. Uses Tailwind for styling but accepts a
 * `className` so you can keep your existing SCSS module styling (eg: cx(styles.sectionTitle)).
 *
 * Example usage (in a Next.js page):
 * <TypingHeadline taglines={["#100% Genuine Spare Parts", "Get the best quote for RFQ", "Fast delivery"]} className={cx(styles.sectionTitle)} />
 */

const TypingHeadline: React.FC<TypingHeadlineProps> = ({
  taglines = ["All Your Industrial Needs in One Place", "Get Best Prices Instantly — Send RFQ","Procurement Made Easy — RFQ Now"],
  className = "",
  loop = true,
  typingSpeed = 50,
  deletingSpeed = 40,
  pause = 3000,
}) => {
  const [index, setIndex] = useState(0); // current tagline index
  const [subIndex, setSubIndex] = useState(0); // characters typed
  const [isDeleting, setIsDeleting] = useState(false);
  const [blink, setBlink] = useState(true);

  // Typing / deleting effect
  useEffect(() => {
    if (!taglines || taglines.length === 0) return;

    const current = taglines[index];

    // decide delay
    let timeout: number;

    if (!isDeleting && subIndex === current.length) {
      // finished typing, pause then start deleting
      timeout = window.setTimeout(() => setIsDeleting(true), pause);
    } else if (isDeleting && subIndex === 0) {
      // finished deleting, move to next tagline
      setIsDeleting(false);
      setIndex((prev) => {
        const next = prev + 1;
        if (next >= taglines.length) return loop ? 0 : prev; // if not looping, stay
        return next;
      });
      timeout = window.setTimeout(() => {}, 100);
    } else {
      timeout = window.setTimeout(() => {
        setSubIndex((prev) => prev + (isDeleting ? -1 : 1));
      }, isDeleting ? deletingSpeed : typingSpeed);
    }

    return () => window.clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [subIndex, isDeleting, index, taglines, typingSpeed, deletingSpeed, pause, loop]);

  // cursor blink
  useEffect(() => {
    const id = window.setInterval(() => setBlink((b) => !b), 100);
    return () => window.clearInterval(id);
  }, []);

  const visibleText = (taglines[index] || "").slice(0, subIndex);

  return (
    <h2
      className={`inline-block align-middle text-center ${className} select-none`}
      aria-live="polite"
    >
      <span>{visibleText}</span>
      <span
        aria-hidden
        className={`ml-1 inline-block  w-[2px] ${blink ? "opacity-100" : "opacity-0"} align-middle bg-current`} 
        style={{ verticalAlign: "text-bottom"}}
      />
    </h2>
  );
};

export default TypingHeadline;