<script setup lang="ts">
import InputNumber from 'primevue/inputnumber'
import FieldShell from './FieldShell.vue'
const props = withDefaults(defineProps<{ modelValue: number | null; label: string; currency?: string; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; min?: number; max?: number }>(), { currency: 'KRW' })
const emit = defineEmits<{ 'update:modelValue': [value: number | null]; blur: [event: FocusEvent] }>()
</script>
<template>
  <FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field">
    <span class="ks-money-field">
      <InputNumber
        :input-id="field.inputId"
        :model-value="modelValue"
        :disabled="disabled"
        :invalid="field.invalid"
        :min="min"
        :max="max"
        :min-fraction-digits="0"
        :max-fraction-digits="0"
        :aria-describedby="field.describedBy"
        :aria-required="field.required || undefined"
        @update:model-value="emit('update:modelValue', $event)"
        @blur="emit('blur', $event as unknown as FocusEvent)"
      />
      <span class="ks-money-field__currency" aria-hidden="true">{{ props.currency }}</span>
    </span>
  </FieldShell>
</template>
<style scoped>
.ks-money-field { display: inline-flex; align-items: center; gap: var(--ks-space-2); }
.ks-money-field__currency { color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); font-weight: 600; }
</style>
