import * as React from 'react';
import {addPropertyControls,ControlType,RenderTarget} from 'framer';
/** @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight auto
 * @framerIntrinsicWidth 720
 * @framerIntrinsicHeight 520
 */
export default function LiveTyped({formId,title,style}:{formId:string;title:string;style?:React.CSSProperties}){
 const ref=React.useRef<HTMLIFrameElement>(null),[height,setHeight]=React.useState(520),canvas=RenderTarget.current()===RenderTarget.canvas;
 React.useEffect(()=>{const handler=(e:MessageEvent)=>{if(e.origin!=='https://livetyped.com'||e.source!==ref.current?.contentWindow||e.data?.formId!==formId)return;if(e.data.type==='livetyped:resize'&&Number.isFinite(e.data.height))setHeight(Math.max(200,Math.min(2400,e.data.height)));};window.addEventListener('message',handler);return()=>window.removeEventListener('message',handler);},[formId]);
 if(canvas||!formId)return <div style={{...style,minHeight:240,padding:32,boxSizing:'border-box',background:'#f7f8f5',border:'1px solid #e3e6dd',borderRadius:16,fontFamily:'sans-serif',color:'#252822',display:'flex',flexDirection:'column',justifyContent:'center',gap:12}}><strong style={{fontSize:24,fontWeight:500}}>LiveTyped</strong><span>{formId?'Your published form appears in Preview and on your site.':'Paste your published form ID in the right panel.'}</span><small>Canvas preview does not start sessions, use voice, or send responses.</small></div>;
 return <iframe ref={ref} title={title||'Contact form'} src={`https://livetyped.com/f/${encodeURIComponent(formId)}`} allow="microphone" loading="lazy" style={{...style,width:'100%',height,border:0,display:'block'}}/>;
}
LiveTyped.defaultProps={title:'Contact form',formId:''};
addPropertyControls(LiveTyped,{formId:{type:ControlType.String,title:'Form ID',placeholder:'Paste your published form ID'},title:{type:ControlType.String,title:'Accessible title',defaultValue:'Contact form'}});