<template>
  <el-select
    :model-value="modelValue"
    :multiple="multiple"
    :placeholder="placeholder || TEXT.common.placeholders.select"
    :filterable="filterable"
    :clearable="clearable"
    :loading="loading"
    style="width: 100%"
    @update:model-value="onUpdate"
  >
    <el-option v-for="opt in options" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
    <slot />
  </el-select>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { TEXT } from "../../locales";

type OptionItem = {
  label: string;
  value: string | number;
};

const props = defineProps<{
  modelValue?: string | number | Array<string | number> | null;
  options?: OptionItem[];
  multiple?: boolean;
  placeholder?: string;
  filterable?: boolean;
  clearable?: boolean;
  loading?: boolean;
}>();

const emit = defineEmits<{
  (event: "update:modelValue", value: string | number | Array<string | number> | null): void;
}>();

const onUpdate = (value: string | number | Array<string | number> | null) => {
  emit("update:modelValue", value);
};

const options = computed(() => props.options ?? []);
const multiple = computed(() => props.multiple ?? false);
const filterable = computed(() => props.filterable ?? true);
const clearable = computed(() => props.clearable ?? true);
const loading = computed(() => props.loading ?? false);
</script>
