"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";
import { Truck, Tag, Gift, Flame } from "lucide-react";

interface PromoTicker {
  id: number;
  message: string;
  icon?: string | null;
}

const iconMap: any = {
  truck: Truck,
  tag: Tag,
  gift: Gift,
  flame: Flame,
};

export default function PromoSection() {
  const [tickers, setTickers] = useState<PromoTicker[]>([]);

  useEffect(() => {
    fetchTickers();
  }, []);

  const fetchTickers = async () => {
    try {
      const res = await api.get("/promo-section");
      setTickers(res.data.data.tickers || []);
    } catch (error) {
      console.error(error);
    }
  };

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

  return (
    <section className="bg-[#f7fff8] overflow-hidden">
      <div className="bg-gradient-to-r from-green-500 to-green-700 py-4 overflow-hidden">
        <div className="marquee animate-left">

          {[...tickers].map((item, index) => {
            const Icon = item.icon
              ? iconMap[item.icon.toLowerCase()]
              : null;

            return (
              <span
                key={`a-${item.id}-${index}`}
                className="flex items-center mx-6 text-white font-semibold text-sm"
              >
                <span className="mr-2">
                  {Icon ? <Icon size={16} /> : "✦"}
                </span>
                {item.message}
              </span>
            );
          })}

          {[...tickers].map((item, index) => {
            const Icon = item.icon
              ? iconMap[item.icon.toLowerCase()]
              : null;

            return (
              <span
                key={`b-${item.id}-${index}`}
                className="flex items-center mx-6 text-white font-semibold text-sm"
              >
                <span className="mr-2">
                  {Icon ? <Icon size={16} /> : "✦"}
                </span>
                {item.message}
              </span>
            );
          })}

        </div>
      </div>
    </section>
  );
}