<!--
  Task 6: Consistent form field with design tokens.
-->
<script lang="ts">
	interface Props {
		label: string;
		name: string;
		type?: string;
		value?: string;
		placeholder?: string;
		required?: boolean;
		disabled?: boolean;
		error?: string;
		helpText?: string;
		oninput?: (e: Event) => void;
	}

	let {
		label,
		name,
		type = 'text',
		value = $bindable(''),
		placeholder = '',
		required = false,
		disabled = false,
		error = '',
		helpText = '',
		oninput
	}: Props = $props();

	const inputBase = 'w-full rounded-lg border px-3 py-2 text-sm transition-all duration-150 focus:outline-none focus:ring-2 bg-[var(--surface-input)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)]';
	const inputNormal = 'border-[var(--border-input)] focus:ring-[var(--color-brand-500)] focus:border-[var(--color-brand-500)]';
	const inputError = 'border-[var(--color-danger)] focus:ring-[var(--color-danger)]';
	const inputDisabled = 'opacity-60 cursor-not-allowed bg-[var(--surface-card-hover)]';
</script>

<div class="flex flex-col gap-1.5">
	<label for={name} class="text-sm font-medium text-[var(--text-primary)]">
		{label}
		{#if required}
			<span class="text-[var(--color-danger)]">*</span>
		{/if}
	</label>

	{#if type === 'textarea'}
		<textarea
			id={name}
			{name}
			bind:value
			{placeholder}
			{required}
			{disabled}
			{oninput}
			class="{inputBase} {error ? inputError : inputNormal} {disabled ? inputDisabled : ''}"
			rows="3"
		></textarea>
	{:else}
		<input
			id={name}
			{name}
			{type}
			bind:value
			{placeholder}
			{required}
			{disabled}
			{oninput}
			class="{inputBase} {error ? inputError : inputNormal} {disabled ? inputDisabled : ''}"
		/>
	{/if}

	{#if error}
		<p class="text-xs text-[var(--color-danger)]">{error}</p>
	{/if}

	{#if helpText && !error}
		<p class="text-xs text-[var(--text-tertiary)]">{helpText}</p>
	{/if}
</div>
