<template>
	<view class="panel">
		<view class="panel-header">
			<view>
				<text class="panel-title">{{ title }}</text>
				<text v-if="subtitle != ''" class="panel-subtitle">{{ subtitle }}</text>
			</view>
			<slot name="extra"></slot>
		</view>
		<view class="panel-body">
			<slot></slot>
		</view>
	</view>
</template>

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

<style scoped>
.panel {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 28rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
}

.panel-header {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.panel-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #12324a;
	line-height: 44rpx;
}

.panel-subtitle {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #6b7a89;
	line-height: 36rpx;
}
</style>