(function attachJsonLdPreview(global) {
  const React = global.React;
  if (!React) return;

  function JsonLdPreview({ schemas, onSelect, selected }) {
    schemas = schemas || [];
    const current = selected || schemas[0];
    return <div className="free-seo-card"><h3>JSON-LD preview</h3>{schemas.length ? <div className="schema-preview-layout"><aside>{schemas.map((schema) => <button type="button" key={schema.id} className={current && current.id === schema.id ? 'active' : ''} onClick={() => onSelect && onSelect(schema)}>{schema.schemaType}<small>{schema.targetPageUrl || 'site'}</small></button>)}</aside><pre>{JSON.stringify((current && current.jsonLd) || {}, null, 2)}</pre></div> : <p>No generated schema blocks yet.</p>}</div>;
  }

  global.JsonLdPreview = JsonLdPreview;
})(window);