<!-- components/SectionField.vue -->
<template>
  <FieldRenderer
    :field="field"
    :field-key="fieldKey"
    :section-key="sectionKey"
    :model-value="sectionModel"
    :user-role="userRole"
    :disabled="disabled"
    :is-super-admin="isSuperAdmin"
    :is-hero-field="isHeroField"
    @update:model-value="onUpdate"
    @open-media-picker="onOpenMediaPicker"
  />
</template>

<script setup>
import FieldRenderer from "./FieldRenderer.vue";

const props = defineProps({
  field: {
    type: Object,
    required: true,
  },
  fieldKey: {
    type: String,
    required: true,
  },
  sectionKey: {
    type: String,
    required: true,
  },
  sectionModel: {
    type: Object,
    required: true,
  },
  userRole: {
    type: String,
    default: "franchisee",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  isSuperAdmin: {
    type: Boolean,
    default: false,
  },
  isHeroField: {
    type: Boolean,
    default: false,
  },
});

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

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

const onOpenMediaPicker = (payload) => {
  emit("open-media-picker", {
    ...payload,
    sectionKey: props.sectionKey,
    fieldKey: payload.fieldKey || props.fieldKey,
  });
};
</script>
