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-4 bg-bunny-dark" ref={adRef}>
      {/* Fixed Header/Footer Ad */}
      <ins 
        className="adsbygoogle"
        style={{ display: 'inline-block', width: '728px', height: '90px' }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot="7241323742"
      />
    </div>
  );
}