"use client";
import { useEffect, useRef } from 'react';
import { scrollInactiveIframe } from './artifact-utils';

export default function InactiveIframeShield({ onActivate }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handler = (e) => scrollInactiveIframe(e);
    el.addEventListener('wheel', handler, { passive: false });
    return () => el.removeEventListener('wheel', handler);
  }, []);
  return (
    <div
      ref={ref}
      className="iframe-focus-shield"
      aria-hidden="true"
      onPointerDown={e => {
        e.preventDefault();
        e.stopPropagation();
        onActivate();
      }}
    />
  );
}
