---
import Loader from '../Loader.astro';
import './FrameRenderer.css';

export interface Props {
  resourceType: 'roadmap' | 'best-practice';
  resourceId: string;
  jsonUrl: string;
  dimensions?: {
    width: number;
    height: number;
  };
}

const { resourceId, resourceType, jsonUrl, dimensions = null } = Astro.props;
---

<div
  id='resource-svg-wrap'
  style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
  data-resource-type={resourceType}
  data-resource-id={resourceId}
  data-json-url={jsonUrl}
>
  <div id='resource-loader'>
    <Loader />
  </div>
</div>

<script src='./renderer.js'></script>