// 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;
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
import { useEffect, useState } from "react";
import * as React from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

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

const AdvertisementPlacements = (props: {
  placement: string;
  data: Advertisement[];
  loading: boolean;
}) => {
  const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);

  useEffect(() => {
    if (!props.loading && props.data.length > 0) {
      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);
    }
  }, [props.data, props.loading, props.placement]);

  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 && (
            <Dialog key={ad.id}>
              <DialogTrigger asChild>
                <img
                  src={ad.contentFileUrl || ad.imageUrl}
                  alt={`Banner ${ad.id}`}
                  className="w-full cursor-pointer rounded-lg shadow-md hover:opacity-90 transition"
                />
              </DialogTrigger>
              <DialogContent className="max-w-4xl p-0 bg-transparent border-0 shadow-none">
                <img
                  src={ad.contentFileUrl || ad.imageUrl}
                  alt={`Banner Besar ${ad.id}`}
                  className="w-full h-auto rounded-lg"
                />
              </DialogContent>
            </Dialog>
          )
      )}
    </div>
  );
};

export default AdvertisementPlacements;