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

const stringsDefault = [
  "your business.",
  "your portfolio.",
  "your startup.",
  "digital marketing.",
];

const AnimatedText = ({ strings = stringsDefault }) => {
  // 过滤掉空字符串
  const filteredStrings = strings.filter(str => !!str && str.trim() !== "");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [animatedText, setAnimatedText] = useState(true);

  useEffect(() => {
    if (filteredStrings.length === 0) return;
    const interval = setInterval(() => {
      setAnimatedText(false);
      setTimeout(() => {
        setAnimatedText(true);
      }, 200);
      setCurrentIndex((prevIndex) => (prevIndex + 1) % filteredStrings.length);
    }, 5000);
    return () => clearInterval(interval); // Cleanup interval on component unmount
  }, [filteredStrings]);

  if (filteredStrings.length === 0) return null;

  return (
    <>
      {animatedText ? (
        <span
          className={`animate__animated animate__fadeInDown`}
          style={{
            display: "inline-block",
            visibility: "visible",
          }}
        >
          {filteredStrings[currentIndex]}
        </span>
      ) : (
        <span
          className={``}
          style={{
            display: "inline-block",
            visibility: "hidden",
          }}
        >
          {filteredStrings[currentIndex]}
        </span>
      )}
    </>
  );
};

export default AnimatedText;