<script lang="ts">
	import { Label } from '$lib/components/ui/label';
	import { Input } from '$lib/components/ui/input';

	interface Props {
		label: string;
		name: string;
		type?: string;
		placeholder?: string;
		required?: boolean;
		disabled?: boolean;
		value?: string;
		error?: string;
		autocomplete?: string;
	}

	let {
		label,
		name,
		type = 'text',
		placeholder = '',
		required = false,
		disabled = false,
		value = $bindable(''),
		error = '',
		autocomplete = ''
	}: Props = $props();
</script>

<div class="space-y-2">
	<Label for={name} class="text-sm font-medium text-slate-700">
		{label}
		{#if required}
			<span class="text-monaco-600">*</span>
		{/if}
	</Label>
	<Input
		id={name}
		{name}
		{type}
		{placeholder}
		{required}
		{disabled}
		{autocomplete}
		bind:value
		class="h-11 transition-all focus:ring-2 focus:ring-monaco-500/20 {error ? 'border-red-500 focus:border-red-500' : ''}"
	/>
	{#if error}
		<p class="text-xs text-red-600">{error}</p>
	{/if}
</div>
