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

interface Advertisement {
  id: string;
  placements: string;
  imageUrl: string;
  [key: string]: any;
}

// // 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;
  data: Advertisement[];
  loading: boolean;
}) => {
  const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
  useEffect(() => {
    if (!props.loading && props.data.length > 0) {
      console.log(
        "RRRRRR",
        props.data[0].placements.includes(props.placement),
        props.placement
      );

      const filtered = props.data.filter((a) =>
        a.placements.includes(props.placement)
      );
      let temps: Advertisement[] | undefined[] = [];
      temps[0] = filtered.find((b) => b.placements.includes("top"));
      temps[1] = filtered.find((b) => b.placements.includes("bottom"));
      setAds(temps);
      console.log("PPPPPP", filtered);
    }
  }, [props.data, props.loading]);

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

export default AdvertisementPlacements;