<script lang="ts">
	import Exclamation from '$lib/icons/Exclamation.svelte';

	let { label = '', error = null, value, name, id, type = 'text'} = $props();
</script>

<div>
	<label for={name} class="block text-sm font-medium leading-6 text-gray-900"
		><span class="flex"
			>{#if error}
				<span class="inline-block mr-1"><Exclamation /></span>
			{/if}
			{label}</span
		></label
	>
	<div class="mt-2">
		<div
			class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
		>
			<input
				class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 text-sm leading-6"
				bind:value
				{type}
				{name}
				{id}
			/>
		</div>
	</div>
	{#if error}
		<p class="block text-sm leading-6 text-red-900 mt-2">{error}</p>
	{/if}
</div>
