<script setup lang="ts">
import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
import type { PageSection } from "@/server/models/dynamic-page/index";

const props = defineProps<{
    label?: any
    layout?: string
    settings?: any
    content?: any

    section: PageSection
}>()
</script>

<template>
    <section class="section-container">
        <!-- tạm thời đóng vì đang đẩy vào label -->
        <!-- <h2 class="section__title mb-3" v-if="props.label">{{ props.label || '' }}</h2> -->
        <div class="section_layout">
            <template v-if="props.layout">
                <DynamicLayout
                    :layout="props.layout"
                    :content="props.content"
                    :settings="props.settings"
                    :section="props.section"
                />
            </template>
            <template v-else>
                <div>
                    Bấm để chọn layout
                </div>
            </template>
        </div>
    </section>
</template>

<style lang="scss" scoped>
.border-pri {
    .section_layout{
        gap: 5px;
    }
}
.section_layout {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); 

    .empty {
        min-height: 100px;
        border-radius: 6px;
        background: #409eff;
    }
}
</style>