<template>
  <div v-for="option in options" :key="option.product_option_id" class="mt-3">
    <component
        v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
        :is="componentMap[option.type]"
        :modelValue="option"
    />
    <div v-else class="text-sm text-error">
      Тип опции "{{ option.type }}" не поддерживается.
    </div>
  </div>
</template>

<script setup>
import OptionRadio from "./Types/OptionRadio.vue";
import OptionCheckbox from "./Types/OptionCheckbox.vue";
import OptionText from "./Types/OptionText.vue";
import OptionTextarea from "./Types/OptionTextarea.vue";
import OptionSelect from "./Types/OptionSelect.vue";
import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";

const componentMap = {
  radio: OptionRadio,
  checkbox: OptionCheckbox,
  text: OptionText,
  textarea: OptionTextarea,
  select: OptionSelect,
};

const options = defineModel();
</script>
