<script>
	import { colors } from '$lib/stores/colors.js';

	export let label;
	export let id;
	export let value;
</script>

<label class="label" for={id}>{label}</label>
<select name={id} {id} bind:value style="background-color: {value}">
	{#each $colors as color}
		<option value={color} style="background-color: {color}">{color}</option>
	{/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>
