<template>
    <div class="flex flex-col gap-[16px] bg-white h-full">
        <div class="flex-row-between-center px-[20px] pt-[20px]">
            <template v-if="slotTitle">
                <slot name="title" />
            </template>
            <span v-else class="text-[20px] font-bold">{{ title }}</span>
            <slot name="right" />
        </div>
        <div class="flex-1 px-[20px] pb-[20px]">
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps({
    title: {
        type: String,
        default: ''
    }
})
const slots = useSlots()
const slotTitle = computed(() => slots?.title)
</script>
<style scoped></style>
