"use client";

import { useEffect } from "react";

declare global {
  interface Window {
    adsbygoogle?: unknown[];
  }
}

interface AdsComponentProps {
  adSlot: string;
  style?: React.CSSProperties;
}

const AdsComponent = ({ adSlot, style }: AdsComponentProps) => {
  useEffect(() => {
    const checkAndLoadAd = () => {
      const adEl = document.querySelector(`ins[data-ad-slot="${adSlot}"]`);
      // console.log("📏 Ad element width:", adEl?.clientWidth);
      // console.log("📦 adsbygoogle array:", window.adsbygoogle);

      if (adEl && adEl.clientWidth > 0) {
        try {
          console.log("🚀 Pushing ad to adsbygoogle...");

          (window.adsbygoogle = window.adsbygoogle || []).push({});
        } catch (err) {
          console.error("AdSense error:", err);
        }
      } else {
        // Retry after delay if not ready yet
        setTimeout(checkAndLoadAd, 500);
      }
    };

    if (typeof window !== "undefined") checkAndLoadAd();

    // Cleanup old ads
    return () => {
      const ads = document.getElementsByClassName("adsbygoogle");
      Array.from(ads).forEach((el) => el.removeAttribute("data-adsbygoogle-status"));
    };
  }, [adSlot]);

  return (
    <ins
      key={`${adSlot}-${Math.random()}`}
      className="adsbygoogle"
      style={{
          display: "block",
          minHeight: "90px",
          width: "100%",
          textAlign: "center",
          ...style,
        }}
      data-ad-client="ca-pub-1833755971344323"
      data-ad-slot={adSlot}
      data-ad-format="auto"
      data-full-width-responsive="true"
    />
  );
};

export default AdsComponent;



// "use client";

// import { useEffect } from "react";

// declare global {
//   interface Window {
//     adsbygoogle?: unknown[];
//   }
// }

// interface AdsComponentProps {
//   adSlot: string;
//   style?: React.CSSProperties;
// }

// const AdsComponent = ({ adSlot }: AdsComponentProps) => {
//   useEffect(() => {
//     const checkAndLoadAd = () => {
//       const adEl = document.querySelector(`ins[data-ad-slot="${adSlot}"]`);
//       console.log("🔍 Checking ad element for slot:", adSlot);
//       console.log("📏 Ad element width:", adEl?.clientWidth);
//       console.log("📦 adsbygoogle array:", window.adsbygoogle);

//       if (adEl && adEl.clientWidth > 0) {
//         try {
//           console.log("🚀 Pushing ad to adsbygoogle...");
//           (window.adsbygoogle = window.adsbygoogle || []).push({});
//         } catch (err) {
//           console.error("❌ AdSense push error:", err);
//         }
//       } else {
//         console.log("⏳ Ad container not ready, retrying...");
//         setTimeout(checkAndLoadAd, 500);
//       }
//     };

//     if (typeof window !== "undefined") checkAndLoadAd();

//     return () => {
//       const ads = document.getElementsByClassName("adsbygoogle");
//       Array.from(ads).forEach((el) => {
//         console.log("🧹 Cleaning up ad element:", el);
//         el.removeAttribute("data-adsbygoogle-status");
//       });
//     };
//   }, [adSlot]);

//   return (
//     <ins
//       key={`${adSlot}-${Math.random()}`}
//       className="adsbygoogle"
//       style={{ display: "block" }}
//       data-ad-client="ca-pub-1833755971344323"
//       data-ad-slot={adSlot}
//       data-ad-format="auto"
//       data-full-width-responsive="true"
//     />
//   );
// };

// export default AdsComponent;