import { useEffect, useRef } from 'react';

export default function MobileInlineAd() {
  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('Mobile Inline AdSense initialization error:', error);
      }
    };

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

  return (
    <div className="w-full flex justify-center py-2 md:hidden" ref={adRef}>
      {/* Mobile only inline ad */}
      <ins 
        className="adsbygoogle"
        style={{ 
          display: 'inline-block', 
          width: '320px',
          height: '50px'
        }}
        data-ad-client="ca-pub-4465464714854276"
        data-ad-slot="7241323742"
      />
    </div>
  );
}