"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";

interface PromoSlider {
  id: number;
  title?: string | null;
  image: string;
}

export default function PromoSlider() {
  const [sliders, setSliders] = useState<PromoSlider[]>([]);

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

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

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

  return (
    <div className="relative overflow-hidden mt-6">
      <div className="animate-right flex gap-5 pb-6">
        {[...sliders, ...sliders].map((item, index) => (
          <div
            key={`${item.id}-${index}`}
            className="min-w-[280px] sm:min-w-[360px] lg:min-w-[460px] h-[150px] sm:h-[190px] lg:h-[230px] rounded-[28px] overflow-hidden shadow-lg border border-slate-100 bg-slate-100"
          >
            <img
              src={item.image}
              alt={item.title || "Promo banner"}
              className="w-full h-full object-cover"
            />
          </div>
        ))}
      </div>
    </div>
  );
}