<script>
	export let label;
	export let id;
	export let options = [];
	export let value;
	export let handleSelect;
	export let element;
	export let option_label;
	export let disabled;

	console.log(`options: ${JSON.stringify(options)}`);
</script>

<label class="label" for={id}>{label}</label>
<select name={id} {id} bind:value on:change={handleSelect} {disabled}>
	{#each options as option}
		{#if element}
			{#if option_label}
				<option value={option[element]}>{option[option_label]}</option>
			{:else}
				<option value={option[element]}>{option[element]}</option>
			{/if}
		{:else if option_label}
			<option value={option}>{option[option_label]}</option>
		{:else}
			<option value={option}>{option}</option>
		{/if}
	{/each}
</select>

<style>
	.label {
		border: 2px solid #555;
		background-color: gray;
		border-radius: 8px;
		padding: 2px;
		width: fit-content;
	}

	select {
		font-size: 1.2rem;
		width: fit-content;
	}
</style>
