"use client";

import { ADSENSE_CLIENT_ID } from "@/config/env";
import { useEffect, useRef } from "react";

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

interface AdUnitProps {
    slot: string;
    className?: string;
    style?: React.CSSProperties;
    format?: string;
}

export default function AdUnit({
    slot,
    className,
    style,
    format = "auto",
}: AdUnitProps) {
    const insRef = useRef<HTMLModElement>(null);
    const pushed = useRef(false);

    useEffect(() => {
        if (!ADSENSE_CLIENT_ID || !slot || pushed.current) return;

        try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
            pushed.current = true;
        } catch {
            // AdSense script not ready yet or blocked (ad blocker, offline, etc.)
        }
    }, [slot]);

    if (!ADSENSE_CLIENT_ID || !slot) return null;

    return (
        <ins
            ref={insRef}
            className={`adsbygoogle block ${className ?? ""}`}
            style={style ?? { display: "block" }}
            data-ad-client={ADSENSE_CLIENT_ID}
            data-ad-slot={slot}
            data-ad-format={format}
            data-full-width-responsive="true"
        />
    );
}