<template>
    <view class="fx-col gap-15">
        <view class="fx-row fx-bet-cen">
            <view class="flex items-center">
                <view v-if="!disableLine" :style="lineStyle"/>
                <text class="text-main" :class="{'font-bold': bold}">{{ title }}</text>
            </view>
            <slot name="more"/>
        </view>
        <slot/>
    </view>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    disableLine: {
        type: Boolean,
        default: false
    },
    bold: {
        type: Boolean,
        default: false
    }
})

const lineStyle = computed(() => ({
    backgroundColor: 'var(--primary-deep-color)',
    width: '5px',
    height: '12px',
    borderRadius: '2px',
    marginRight: '5px'
}))
</script>

<style scoped>

</style>
