<script lang="ts">
	import leftUrl from '@assets/audio/stereo/Left.mp3';
	import centerUrl from '@assets/audio/stereo/Center.mp3';
	import rightUrl from '@assets/audio/stereo/Right.mp3';
	import Speaker from './speaker.svelte';
	import CycleButton from './cycle-button.svelte';
	import { i18n } from '$lib/i18n';

	let speakersEl: HTMLElement;
</script>

<div class="test">
	<div class="speakers" bind:this={speakersEl}>
		<Speaker src={leftUrl} left inline>{$i18n.t('Left')}</Speaker>
		<Speaker src={centerUrl} center inline>{$i18n.t('Center')}</Speaker>
		<Speaker src={rightUrl} right inline>{$i18n.t('Right')}</Speaker>
	</div>
	<CycleButton element={speakersEl} />
</div>

<style>
	.test {
		display: flex;
		gap: 1em;
		align-items: center;
		margin: 0.5em 0;
	}

	.speakers {
		display: flex;
		gap: 1em;
		font-size: 1.25em;
		margin-right: 1em;
	}
</style>
