import { useEffect, useRef } from 'react';

export default function HeaderAd() {
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initializeAd = () => {
      const insElement = adRef.current?.querySelector('ins');
      if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;

      try {
        // @ts-ignore
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      } catch (error) {
        console.error('Header AdSense initialization error:', error);
      }
    };

    // Initialize the ad immediately
    initializeAd();
  }, []);

  return (
    <div className="w-full bg-bunny-dark hidden lg:flex justify-center py-4" ref={adRef}>
      {/* Desktop Only: 1200x90px Header Ad */}
      <ins 
        className="adsbygoogle"
        style={{ 
          display: 'inline-block', 
          width: '1200px',
          height: '90px'
        }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot="8632735961"
      />
    </div>
  );
}