<script setup>
	import { onMounted, ref, watch } from 'vue'
	const props = defineProps(['categories'])
	const instruments = ref([])
	const chosenInstrument = ref('clarinet')
	for(let category of props.categories){
		if(!instruments.value.includes(category.instrument)){
			instruments.value.push(category.instrument)
		}
	}
</script>
<template>
	<h3>Choose Category</h3>
	<select v-model="chosenInstrument">
		<option v-for="instrument in instruments" v-bind:value="instrument">
			{{instrument}}
		</option>
	</select>
	<select v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
		<option v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
			{{category.category}}
		</option>
	</select>
</template>
