<template>
    <view class="card">
        <view class="card__title" :style="titleStyle">
            <text>{{ title }}</text>
            <slot name="right" />
        </view>
        <view class="card__body">
            <slot />
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    border: {
        type: Boolean,
        default: true
    }
})

const titleStyle = computed(() => {
    const style = {}
    if (props.border) {
        style.borderBottom = '1px solid #f1f1f1'
    }
    return style
})
</script>

<style lang="scss" scoped>
.card {
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 24rpx;
    &__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx;
    }
    &__body {
        padding: 24rpx;
    }
}
</style>
