---
import DownloadPopup from '../DownloadPopup.astro';
import Loader from '../Loader.astro';
import ShareIcons from '../ShareIcons.astro';
import SubscribePopup from '../SubscribePopup.astro';
import TopicOverlay from '../TopicOverlay.astro';
import './InteractiveRoadmap.css';

export interface Props {
  roadmapId: string;
  description: string;
  jsonUrl: string;
  dimensions?: {
    width: number;
    height: number;
  };
}

const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
---

<link
  rel='preload'
  href='/fonts/balsamiq.woff2'
  as='font'
  type='font/woff2'
  crossorigin
  slot='after-header'
/>

<div class='bg-gray-50 py-4 sm:py-12'>
  <div class='max-w-[1000px] container relative'>
    <ShareIcons
      description={description}
      pageUrl={`https://roadmap.sh/${roadmapId}`}
    />
    <DownloadPopup />
    <SubscribePopup />
    <TopicOverlay roadmapId={roadmapId} />
    <div
      id='roadmap-svg'
      style={dimensions
        ? `--aspect-ratio:${dimensions.width}/${dimensions.height}`
        : null}
      data-roadmap-id={roadmapId}
      data-json-url={jsonUrl}
    >
      <Loader />
    </div>
  </div>
</div>

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