"use client";

import { useEffect, useRef } from "react";

interface Props {
  client: string;
  slot: string;
  layout?: "display" | "in-article" | "fluid";
  className?: string;
}

export function AdSenseUnit({ client, slot, layout = "display", className }: Props) {
  const ref = useRef<HTMLModElement>(null);

  useEffect(() => {
    try {
      const w = window as any;
      if (w.adsbygoogle && ref.current) {
        w.adsbygoogle.push({});
      }
    } catch {
      /* ignore */
    }
  }, []);

  return (
    <div className={className}>
      <ins
        ref={ref}
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-format="auto"
        data-ad-layout={layout === "display" ? undefined : layout}
        data-full-width-responsive="true"
      />
    </div>
  );
}