import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function ArchifyDiagram({name, title}: {name: string; title: string}): React.ReactElement {
  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) throw new Error('Invalid diagram name');
  const source = useBaseUrl(`/diagrams/${name}/`);
  const json = useBaseUrl(`/diagrams/${name}.json`);
  return <section className="archify-panel" aria-label={title}>
    <div className="archify-toolbar"><strong>Interactive diagram</strong><div><a href={source} target="_blank" rel="noopener noreferrer">Open full viewer ↗</a><a href={json} download>JSON source ↓</a></div></div>
    <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
  </section>;
}