﻿<template>
	<view class="surface-card card">
		<view class="head" v-if="title || subtitle || $slots.action">
			<view class="title-group">
				<text v-if="title" class="section-title">{{ title }}</text>
				<text v-if="subtitle" class="section-subtitle">{{ subtitle }}</text>
			</view>
			<slot name="action"></slot>
		</view>
		<slot></slot>
	</view>
</template>

<script setup>
defineProps({
	title: {
		type: String,
		default: ''
	},
	subtitle: {
		type: String,
		default: ''
	}
})
</script>

<style lang="scss" scoped>
.card {
	padding: 28rpx;
}

.head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16rpx;
	margin-bottom: 24rpx;
}

.title-group {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}
</style>
