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 LeftBanner = () => {
  const [ads, setAds] = useState<Advertisement[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
 const [showData, setShowData] = React.useState("10");
  const [categories, setCategories] = React.useState<any>();
  const [dataTable, setDataTable] = React.useState<any[]>([]);
  const [totalData, setTotalData] = React.useState<number>(1);
  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
    const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
  const [page, setPage] = React.useState(1);


  const fetchData = async () => {
    try {
      setLoading(true);
      const res = await listDataAdvertisements( page - 1,
        showData,
        "",
        categoryFilter?.sort().join(","),
        statusFilter?.sort().join(","));
      const data = res?.data?.data;
      const contentData = data?.content;

      contentData.forEach((item: Advertisement, index: number) => {
        item.no = index + 1;
      });

      setAds(contentData);
    } catch (error) {
      console.error("Error fetching advertisements:", error);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="sticky top-0 space-y-4 ml-14">
      {loading && <p className="text-sm text-gray-500">Loading...</p>}
      {ads.map((ad) => (
        <img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
      ))}
    </div>
  );
};

export default LeftBanner;