<template>
  <v-select
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :options="bankOptions"
    :reduce="option => option.Id"
    label="Name"
    :placeholder="placeholder"
    :clearable="clearable"
    :class="className"
  >
    <template #option="{ Code, Name }">
      <div>
        <div class="fw-bold">{{ Code }}</div>
        <small class="text-muted">{{ Name }}</small>
      </div>
    </template>
  </v-select>
</template>

<script setup>
import { BankList } from '@/infrastructure/constants/bankAccountConstants';

// Props
defineProps({
  modelValue: [Number, String],
  placeholder: {
    type: String,
    default: 'Chọn ngân hàng...'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  className: String
});

// Emits
defineEmits(['update:modelValue']);

// Data
const bankOptions = BankList;
</script>
