<template>
	<view class="info-list">
		<view v-for="item in items" :key="item.label" class="info-item">
			<text class="info-label">{{ item.label }}</text>
			<text class="info-value">{{ item.value }}</text>
		</view>
	</view>
</template>

<script setup lang="uts">
type ServiceInfoListItem = {
	label: string
	value: string
}

defineProps({
	items: {
		type: Array<ServiceInfoListItem>,
		default: [] as Array<ServiceInfoListItem>
	}
})
</script>

<style scoped>
.info-list {
	gap: 14rpx;
}

.info-item {
	flex-direction: row;
	align-items: flex-start;
	gap: 12rpx;
}

.info-label,
.info-value {
	font-size: 26rpx;
	line-height: 38rpx;
}

.info-label {
	color: #66788a;
}

.info-value {
	flex: 1;
	color: #16324f;
}
</style>