<script lang="ts">
	import { Field } from '@ark-ui/svelte/field';
	import type { Snippet } from 'svelte';
	import type { HTMLInputAttributes } from 'svelte/elements';

	interface Props {
		id: string;
		label: string;
		type?: string;
		placeholder?: string;
		autocomplete?: HTMLInputAttributes['autocomplete'];
		disabled?: boolean;
		required?: boolean;
		error?: string | null;
		right?: Snippet;
		value?: string;
	}

	let {
		id,
		label,
		type = 'text',
		placeholder = '',
		autocomplete,
		disabled = false,
		required = false,
		error = null,
		right,
		value = $bindable('')
	}: Props = $props();

	const invalid = $derived(!!error);
</script>

<Field.Root {invalid} {required} class="space-y-2">
	<div class="flex items-center justify-between gap-3">
		<Field.Label
			for={id}
			class="text-base-content/60 text-xs font-semibold tracking-wider uppercase"
		>
			{label}
		</Field.Label>
		{@render right?.()}
	</div>

	<div class="group relative">
		<Field.Input
			{id}
			{type}
			{placeholder}
			{disabled}
			{autocomplete}
			{required}
			bind:value
			class="border-base-content/10 bg-base-200/25 text-base-content placeholder-base-content/40 focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border px-4 py-3 transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
		/>
	</div>

	{#if error}
		<Field.ErrorText class="text-error text-sm font-medium">{error}</Field.ErrorText>
	{/if}
</Field.Root>
