<script lang="ts">
    interface Props {
        value: number;
        min?: number;
        max?: number;
        step?: number;
        disabled?: boolean;
        size?: "sm" | "md";
        class?: string;
    }

    let {
        value = $bindable(0),
        min = 0,
        max = 9999,
        step = 1,
        disabled = false,
        size = "md",
        class: className = "",
    }: Props = $props();

    const sizeClasses = {
        sm: "w-12 h-10 text-lg",
        md: "w-16 h-12 text-xl",
    };
</script>

<div
    class="inline-flex items-center justify-center border-4 border-black bg-kv-blue
		{sizeClasses[size]}
		{className}"
>
    <input
        type="number"
        bind:value
        {min}
        {max}
        {step}
        {disabled}
        class="w-full h-full bg-transparent text-kv-white font-kv-body text-center border-none outline-none
			[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
			{disabled ? 'opacity-50 cursor-not-allowed' : ''}"
    />
</div>
