<template>
  <div class="inspiring-mind-section">
    <SectionField
      :section-key="sectionKey"
      field-key="heading"
      :field="section.fields.heading"
      :section-model="sectionModel"
      :model-value="sectionModel"
      :disabled="disabled"
      @update-field="updateField"
    />

    <SectionField
      :section-key="sectionKey"
      field-key="subHeading"
      :field="section.fields.subHeading"
      :section-model="sectionModel"
      :model-value="sectionModel"
      :disabled="disabled"
      @update-field="updateField"
    />

    <SectionField
      :section-key="sectionKey"
      field-key="description"
      :field="section.fields.description"
      :section-model="sectionModel"
      :model-value="sectionModel"
      :disabled="disabled"
      @update-field="updateField"
    />

    <SectionField
      v-if="section.fields.images"
      :section-key="sectionKey"
      field-key="images"
      :field="section.fields.images"
      :section-model="sectionModel"
      :model-value="sectionModel"
      :disabled="disabled"
      @update-field="updateField"
      @open-media-picker="emitOpenMediaPicker"
    />

    <SectionField
      :section-key="sectionKey"
      field-key="ctaButtonText"
      :field="section.fields.ctaButtonText"
      :section-model="sectionModel"
      :model-value="sectionModel"
      :disabled="disabled"
      @update-field="updateField"
    />
  </div>
</template>

<script setup>
import SectionField from "@/components/SectionField.vue";

const props = defineProps({
  section: {
    type: Object,
    required: true,
  },
  sectionKey: {
    type: String,
    required: true,
  },
  sectionModel: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update-field", "open-media-picker"]);

const updateField = (sectionKey, fieldKey, value) => {
  emit("update-field", sectionKey, fieldKey, value);
};

const emitOpenMediaPicker = (payload) => {
  emit("open-media-picker", payload);
};
</script>

<style scoped>
.inspiring-mind-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
