<template>
  <FormField
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :disabled="disabled"
  >
    <template #input="{ invalid, value, setValue }">
      <SelectVue
        :for-id="forId"
        :invalid="invalid"
        :disabled="disabled"
        :options="options || []"
        :placeholder="placeholder"
        :model-value="(value as string)"
        @update:model-value="(newValue) => setValue(newValue)"
      />
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';
import SelectVue, { SelectOption } from '../base/Select.vue';

const props = withDefaults(
  defineProps<{
    forId?: string;
    label: string;
    name: string;
    options: SelectOption[];
    disabled?: boolean;
    placeholder?: string;
  }>(),
  {
    disabled: false,
  }
);
</script>
