import { listDataAdvertisements } from "@/service/broadcast/broadcast";
import { useEffect, useState } from "react";
import * as React from "react";

interface Advertisement {
  id: string;
  imageUrl: string;
  [key: string]: any; // Tambahan kalau ada properti lain
}

// // Simulasi fungsi API (replace dengan yang asli)
// async function listDataAdvertisements(
//   page: number,
//   size: number,
//   search: string,
//   category: string,
//   status: string
// ) {
//   // contoh struktur response dummy
//   return {
//     data: {
//       data: {
//         content: [
//           { id: "1", imageUrl: "/images/all-img/kiri1.png" },
//           { id: "2", imageUrl: "/images/all-img/kiri2.png" },
//         ],
//         totalElements: 2,
//         totalPages: 1,
//       },
//     },
//   };
// }

const AdvertisementPlacements = (props: { placement?: string }) => {
  const [ads, setAds] = useState<Advertisement[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  const fetchData = async () => {
    try {
      setLoading(true);
      const res = await listDataAdvertisements( 
        0,
        "4",
        ""
      );
      const data = res?.data?.data;
      const contentData = data?.content;
      if (props.placement == "left") {
        setAds(contentData.slice(0,2));
      } else {
        setAds(contentData.slice(2));
      }
    } catch (error) {
      console.error("Error fetching advertisements:", error);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-14"}`}>
      {loading && <p className="text-sm text-gray-500">Loading...</p>}
      {ads?.map((ad) => (
        <img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
      ))}
    </div>
  );
};

export default AdvertisementPlacements;