<script>
	export let song;
	export let { album, movie, band, artists, year, difficulty, metronome, capo, strumming } = song;
</script>

<div class="song-meta">
	{#if album}
		<div class="album">Album: {album}</div>
	{/if}
	{#if movie}
		<div class="movie">Movie: {movie}</div>
	{/if}
	{#if band}
		<div class="band">Band: {band}</div>
	{/if}
	{#if artists}
		<div class="artists">
			<span>Artists:</span>
			{#each artists as artist, index}
				{#if index > 0}<span>,</span>{/if}
				<span class="artist">{artist}</span>
			{/each}
		</div>
	{/if}
	{#if year}
		<div class="year">Year: {year}</div>
	{/if}
	{#if difficulty}
		<div class="difficulty">Difficulty: {difficulty}</div>
	{/if}
	{#if metronome}
		<div class="metronome">Metronome: {metronome}</div>
	{/if}
	{#if capo}
		<div class="capo">Capo: {capo}th Fret</div>
	{/if}
	{#if strumming}
		<div class="strumming">
			<span>Strumming: </span>
			{#each strumming as pattern, index}
				{#if index > 0}<span>,</span>{/if}
				<span class="pattern">{pattern}</span>
			{/each}
		</div>
	{/if}
</div>

<style>
	.song-meta {
		border: 1px solid #aaa;
		padding: 1rem 2rem;
	}
</style>