import React, { useEffect, useRef } from 'react'

export default function AdSenseUnit({
  slot,
  client = 'ca-pub-6457864535683080',
  format = 'auto',
  className = '',
  enabled = true,
}) {
  const pushed = useRef(false)

  useEffect(() => {
    if (!enabled || !slot || pushed.current) {
      return undefined
    }

    pushed.current = true

    try {
      window.adsbygoogle = window.adsbygoogle || []
      window.adsbygoogle.push({})
    } catch {
      // AdSense may be blocked or not yet loaded (consent not granted).
    }

    return undefined
  }, [enabled, slot])

  if (!enabled || !slot) {
    return null
  }

  return (
    <div className={['flex w-full justify-center', className].filter(Boolean).join(' ')}>
      <ins
        className="adsbygoogle w-full max-w-3xl"
        style={{ display: 'block', textAlign: 'center' }}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-format={format}
        data-full-width-responsive="true"
      />
    </div>
  )
}