"use client";

import React from "react";
import "./animated-scroll.css";

interface AnimatedScrollProps {
  items?: string[];
  textColor?: string;
}

const defaultItems = [
  "NEW REALITY FOR YOUR CHILD",
  "GREAT OPPORTUNITIES",
  "TEAMWORK",
  "NEW REALITY FOR YOUR CHILD",
  "GREAT OPPORTUNITIES",
  "TEAMWORK",
];

const AnimatedScroll = ({
  items = defaultItems,
  textColor = "#0097dc",
}: AnimatedScrollProps) => {
  const loopItems = [...items, ...items, ...items];

  return (
    <div className="relative w-full overflow-hidden bg-transparent py-4 pt-6 marquee">
      <div className="animate-scroll flex items-center whitespace-nowrap">
        {loopItems.map((text, i) => (
          <React.Fragment key={i}>
            <span
              style={{ color: textColor }}
              className="font-bold text-lg uppercase tracking-wide mx-4"
            >
              {text}
            </span>

            <span
              style={{ backgroundColor: textColor }}
              className="w-2.5 h-2.5 rounded-full inline-block mx-4"
            ></span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

export default AnimatedScroll;