import * as React from 'react';

export interface ScoreProps {
	id: string;
	alt: string;
}

export const Score: React.FC<ScoreProps> = ({
	id,
	alt,
}) => {
	return (
		<div>
			<a href={`scores/${id}.svg`}>
				<figure>
					<img className="svg" src={`scores/${id}.svg`} alt={alt} />
					<figcaption>
						{alt}
					</figcaption>
				</figure>
			</a>
			<div className="screen-controls">
				<a href={`scores/${id}.musicxml`}>
					Download MusicXML
				</a>
			</div>
		</div>
	);
};