import React, { useEffect, useRef, useState } from 'react';

export default function BridgeFrame({ src, title }: { src: string; title?: string }) {
  const ref = useRef<HTMLIFrameElement>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const onMessage = (e: MessageEvent) => {
      if (!ref.current) return;
      if (typeof e.data === 'object' && e.data && 'bridgeHeight' in e.data) {
        const h = Number((e.data as any).bridgeHeight);
        if (h > 0) ref.current.style.height = `${h}px`;
      }
    };
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);

  return (
    <div className="w-full">
      {!loaded && <div className="p-6 text-sm opacity-70">Loading classic view…</div>}
      <iframe
        ref={ref}
        src={src}
        title={title || 'Classic View'}
        className="w-full border rounded-2xl shadow-sm"
        onLoad={() => setLoaded(true)}
        style={{ minHeight: 800 }}
      />
    </div>
  );
}