<script setup lang="ts">
import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';

const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
const props = defineProps<{
    label?: any
    layout?: string
    settings?: any
    content?: any

    section: any
}>()
</script>

<template>
    <section class="section-container">
        <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>
.section_layout {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); 
    gap: 10px;     

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