<script lang="ts">
    interface Props {
        label: string;
        value: number;
        onchange: (value: number) => void;
        scale?: number;
        min?: number;
        max?: number;
        step?: number;
        placeholder?: string;
        disabled?: boolean;
    }

    let {
        label,
        value,
        onchange,
        scale = 100,
        min,
        max,
        step,
        placeholder,
        disabled,
    }: Props = $props();

    function onInput(e: Event & { currentTarget: HTMLInputElement }) {
        const pct = e.currentTarget.valueAsNumber;
        if (!Number.isNaN(pct)) onchange(pct / scale);
    }
</script>

<label class="flex flex-col gap-1">
    <span class="label text-xs">{label}</span>
    <input
        class="input input-sm w-20"
        type="number"
        {min}
        {max}
        {step}
        {placeholder}
        value={Math.round(value * scale)}
        oninput={onInput}
        {disabled}
    />
</label>
