---
import {loadScore} from '../load-score';

const { id, alt } = Astro.props;
const scoreXml = await loadScore(id);

---

<div class="score-wrapper">
	<a href={`../scores/${id}.svg`}>
		<figure>
			<Fragment set:html={scoreXml} />
			<figcaption>
				{alt}
			</figcaption>
		</figure>
	</a>
	<div class="screen-controls">
		<a href={`../scores/${id}.musicxml`}>
			Download MusicXML
		</a>
	</div>
</div>