<script lang="ts">
    export let value: number = 0;      // The raw number
    export let label: string = "";     // Field label
    export let onInput: (() => void) | null = null; // Optional extra handler
    export let disabled: boolean = false;
    export let className: string = "";
    let formatted = "";
  
    // Format whenever value changes
    $: formatted = `Rp ${value.toLocaleString("id-ID", {
      minimumFractionDigits: 0
    })}`;
  
    function handleInput(e: Event) {
      let raw = (e.target as HTMLInputElement).value;
      raw = raw.replace(/^Rp\s?/, "").replace(/[^\d]/g, "");
      value = parseInt(raw) || 0;
      formatted = `Rp ${value.toLocaleString("id-ID")}`;
  
      // ✅ If extra handler provided, run it
      if (onInput) onInput();
    }
  </script>
  
  <label class="block text-sm font-medium text-gray-700">{label}</label>
  <input
    type="text"
    bind:value={formatted}
    placeholder="Rp 0"
    class="w-full border p-2 rounded ${className}"
    on:input={handleInput}
    disabled={disabled}
  />
  