interface MarqueeStripProps {
  text?: string;
  className?: string;
}

export function MarqueeStrip({
  text = "Artificial Intelligence",
  className = "",
}: MarqueeStripProps) {
  const marqueeItems = Array.from({ length: 6 });

  return (
    <div
      className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-tenext-teal to-tenext-blue py-[42px] ${className}`}
      style={{ transform: "rotate(-2.07deg)" }}
    >
      <div className="marquee-track flex w-max whitespace-nowrap">
        {[0, 1].map((track) => (
          <div key={track} className="flex shrink-0 items-center">
            {marqueeItems.map((_, i) => (
              <div
                key={`${track}-${i}`}
                className="flex items-center gap-8 pr-8"
              >
                <span
                  className="marquee-text text-white"
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  {text}
                </span>
                <span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}