<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	import { Field as FormField, Control, FieldErrors } from 'formsnap';
	import * as Field from '$lib/components/ui/field/index.js';
	import * as InputGroup from '$lib/components/ui/input-group/index.js';

	let {
		form,
		data,
		name,
		label,
		id,
		description
	}: {
		form: any;
		data: any;
		name: string;
		label: string;
		id: string;
		description?: string;
	} = $props();
</script>

<FormField {form} {name}>
	<Field.Field>
		<Control {id}>
			{#snippet children({ props })}
				<Field.Label>{label}</Field.Label>
				<InputGroup.Root>
					<InputGroup.Addon>
						<InputGroup.Text>£</InputGroup.Text>
					</InputGroup.Addon>
					<InputGroup.Input
						{...props}
						type="number"
						min="0"
						step="0.01"
						inputmode="decimal"
						placeholder="0.00"
						bind:value={$data[name]}
					/>
				</InputGroup.Root>
			{/snippet}
		</Control>
		{#if description}
			<Field.Description>{description}</Field.Description>
		{/if}
		<Field.Error><FieldErrors /></Field.Error>
	</Field.Field>
</FormField>
