'use client'

import { useEffect, useRef } from 'react'
import { useSiteSettings } from '@/hooks/use-site-settings'

type AdUnitProps = {
  slot: string
  format?: 'auto' | 'rectangle' | 'horizontal' | 'vertical'
  className?: string
}

export function AdUnit({ slot, format = 'auto', className = '' }: AdUnitProps) {
  const ref = useRef<HTMLDivElement>(null)
  const s = useSiteSettings()
  const adsense = s.adsense ?? {}
  const enabled = adsense.enabled === true && adsense.publisherId

  useEffect(() => {
    if (!enabled || !slot || !ref.current) return
    try {
      const ins = document.createElement('ins')
      ins.className = 'adsbygoogle'
      ins.style.display = 'block'
      ins.dataset.adClient = adsense.publisherId
      ins.dataset.adSlot = slot
      if (format !== 'auto') {
        ins.dataset.adFormat = format
      }
      ref.current.appendChild(ins)
      ;(window as any).adsbygoogle = (window as any).adsbygoogle || []
      ;(window as any).adsbygoogle.push({})
    } catch {}
  }, [enabled, slot, adsense.publisherId])

  if (!enabled || !slot) return null

  return (
    <div ref={ref} className={`adsense-container my-6 overflow-hidden ${className}`} />
  )
}