"use client";

/**
 * Generic Ad Renderer
 * Tidak ada URL/key yang hardcoded di sini.
 * Semua kode HTML iklan datang langsung dari site_config.json → ads[]
 * Ganti ad network? Cukup edit site_config.json, tidak perlu build ulang.
 */

interface AdSlot {
  id: string;
  position: string;
  enabled: boolean;
  width: number;
  height: number;
  html: string;
}

export const AdSlotRenderer = ({ slot }: { slot: AdSlot | undefined }) => {
  if (!slot || !slot.enabled || !slot.html) return null;

  // Desktop: Full size | Mobile: Responsive scaling
  let containerWidth: number | string = slot.width;
  let containerHeight: number | string = slot.height;
  let iframeWidth = slot.width;
  let iframeHeight = slot.height;

  // Responsive untuk leaderboard 728x90: scale down on mobile, full on desktop
  if (slot.width === 728) {
    // Mobile: 320px max, scale proportionally
    // Desktop: 728x90 full size
    containerWidth = '100%';
    iframeWidth = slot.width;
    iframeHeight = slot.height;
  }

  return (
    <div className="flex justify-center w-full my-4 sm:my-6 z-10 relative">
      <div 
        style={{ 
          width: containerWidth, 
          height: slot.width === 728 ? 'auto' : containerHeight,
          maxWidth: slot.width === 728 ? '728px' : '100%'
        }} 
        className="flex-shrink-0 flex justify-center"
      >
        <iframe
          srcDoc={slot.html}
          width={iframeWidth}
          height={iframeHeight}
          frameBorder="0"
          scrolling="no"
          sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
          style={{ border: 'none', overflow: 'hidden', background: 'transparent', maxWidth: '100%' }}
        />
      </div>
    </div>
  );
};