<script lang="ts">
	import QuickAddButton from '$lib/components/QuickAddButton.svelte';
	import type { ExerciseConfig } from './workoutData';

	interface Props extends ExerciseConfig {
		label: string;
		value: number;
		onchange: (value: number) => void;
		defaultValue: number;
	}

	let {
		label,
		icon,
		name,
		value = $bindable(),
		onchange,
		min = 0,
		max = 9999,
		step = 1,
		quickAddOptions,
		defaultValue,
		color = 'blue'
	}: Props = $props();

	function quickAdd(amount: number) {
		const newValue = Math.max(min, value + amount);
		value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
		onchange(value);
	}
</script>

<div class="mb-6">
	<label for={name} class="mb-2 block text-sm font-medium text-gray-700">
		{icon}
		{label}
	</label>
	<div class="flex items-center space-x-2">
		<input
			id={name}
			{name}
			type="number"
			bind:value
			{min}
			{max}
			{step}
			{defaultValue}
			required={true}
			class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
		/>
		{#each quickAddOptions as option}
			<QuickAddButton label={option.label} onclick={() => quickAdd(option.value)} {color} />
		{/each}
	</div>
</div>
