<script lang="ts">
	import { writable } from 'svelte/store';

	export let form;
	export let errors;
	export let validate;
	export let field;
	export let constraints;

	const state = writable('');
</script>

<div class="mb-4">
	{#if $errors[field.name]}
		<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
	{:else}
		<label for={field.name} class="block mb-2 font-semibold text-white">
			{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
		</label>
	{/if}
	<select
		name={field.name}
		class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
		bind:value={$form[field.name]}
		aria-invalid={$errors[field.name] ? 'true' : undefined}
		{...constraints[field.name]}
	>
		<option value="">Select...</option>
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="coconut">Coconut</option>
		<option value="strawberry">Strawberry</option>
		<option value="mango">Mango</option>
	</select>
</div>
