<script lang="ts">
	const INSTRUMENT_ICONS: Record<string, string> = {
		dir: '🎼',
		pic: '/icons/piccolo.png',
		flu: '/icons/flute.png',
		cla: '/icons/clarinette.png',
		clb: '/icons/clarinette_basse.png',
		sax: '/icons/sax-alto.png',
		sab: '/icons/sax-barython.png',
		sat: '/icons/sax-tenor.png',
		coa: '/icons/cor-anglais.jpg',
		cba: '/icons/contrebasse.png',
		cor: '/icons/cor.png',
		trp: '/icons/trumpet.png',
		trb: '/icons/tronbonne.png',
		tub: '/icons/tuba.png',
		htb: '/icons/hautbois.png',
		bas: '/icons/basson.png',
		per: '/icons/percussion.png',
		crn: '/icons/cornet.png',
		eup: '/icons/euphonium.png',
		har: '/icons/harpe.png',
		pia: '🎹',
		sup: '📄',
		par: '📄'
	};

	const INSTRUMENT_NAMES: Record<string, string> = {
		dir: 'Direction',
		pic: 'Piccolo',
		flu: 'Flûte',
		cla: 'Clarinette',
		clb: 'Clarinette Basse',
		sax: 'Sax Alto',
		sat: 'Sax Ténor',
		sab: 'Sax Baryton',
		coa: 'Cor Anglais',
		cba: 'Contrebasse',
		cor: 'Cor',
		trp: 'Trompette',
		trb: 'Trombone',
		tub: 'Tuba',
		htb: 'Hautbois',
		bas: 'Basson',
		per: 'Percussions',
		crn: 'Cornet',
		eup: 'Euphonium',
		har: 'Harpe',
		pia: 'Piano',
		sup: 'Parties supplementaires',
		par: 'Parties'
	};

	const instruments = Object.entries(INSTRUMENT_NAMES).map(([code, name]) => ({
		code,
		name,
		icon: INSTRUMENT_ICONS[code] || '❓'
	}));
</script>

<svelte:head>
	<title>Test icônes instruments - OHMJ</title>
</svelte:head>

<div class="container mx-auto px-4 py-8">
	<h1 class="text-3xl font-bold text-ohmj-primary mb-8">Test icônes instruments</h1>

	<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
		{#each instruments as inst}
			<div class="bg-white p-6 rounded-lg shadow border border-gray-200 text-center">
				<div class="text-5xl mb-2">
					{#if inst.icon.startsWith('/')}
						<img src={inst.icon} alt={inst.name} class="w-12 h-12 mx-auto object-contain" />
					{:else}
						{inst.icon}
					{/if}
				</div>
				<p class="font-semibold">{inst.name}</p>
				<p class="text-sm text-gray-400">{inst.code}</p>
			</div>
		{/each}
	</div>
</div>
