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 flex justify-center py-1 bg-bunny-dark" ref={adRef}>
      {/* Mobile: 320x50px */}
      <ins 
        className="adsbygoogle md:hidden"
        style={{ 
          display: 'inline-block', 
          width: '320px',
          height: '50px'
        }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot="7241323742"
      />
      
      {/* Desktop: 970x90px Wide Header Ad */}
      <ins 
        className="adsbygoogle hidden md:inline-block"
        style={{ 
          display: 'inline-block', 
          width: '970px',
          height: '90px'
        }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot="6554928035"
      />
    </div>
  );
}