<!-- components/SectionLayouts/DefaultSectionLayout.vue -->
<template>
  <div class="default-layout">
    <!-- Hero fields -->
    <div v-if="heroKeys.length" class="hero-fields-row">
      <div v-for="fieldKey in heroKeys" :key="fieldKey" class="hero-field-item">
        <SectionField
          :field="section.fields[fieldKey]"
          :field-key="fieldKey"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          :is-hero-field="true"
          @update-field="emitUpdate"
          @open-media-picker="emitMedia"
        />
      </div>
    </div>

    <!-- Grid fields -->
    <div v-if="gridKeys.length" class="fields-container">
      <div class="fields-grid">
        <div v-for="fieldKey in gridKeys" :key="fieldKey" class="field-item">
          <SectionField
            :field="section.fields[fieldKey]"
            :field-key="fieldKey"
            :section-key="sectionKey"
            :section-model="sectionModel"
            :model-value="sectionModel"
            :user-role="userRole"
            :disabled="disabled"
            :is-super-admin="isSuperAdmin"
            @update-field="emitUpdate"
            @open-media-picker="emitMedia"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import SectionField from "../SectionField.vue";

const HERO_FIELDS = ["heading", "mainHeading", "subHeading", "description"];

const props = defineProps({
  section: Object,
  sectionKey: String,
  sectionModel: Object,
  userRole: String,
  disabled: Boolean,
  isSuperAdmin: Boolean,
});

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

const heroKeys = computed(() =>
  Object.keys(props.section.fields).filter((k) => HERO_FIELDS.includes(k)),
);

const gridKeys = computed(() =>
  Object.keys(props.section.fields).filter((k) => !HERO_FIELDS.includes(k)),
);

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

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

<style scoped>
.default-layout {
  background: #ffffff;
}
.hero-fields-row {
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-field-item {
  width: 100%;
}
.fields-container {
  padding: 24px;
}
.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.field-item {
  width: 100%;
}
@media (max-width: 768px) {
  .hero-fields-row,
  .fields-container {
    padding: 18px;
  }
  .fields-grid {
    grid-template-columns: 1fr;
  }
}
</style>
