<template>
	<view class="action-row" :class="compact ? 'compact-row' : ''">
		<view v-for="item in actions" :key="item.key" class="action-btn" :class="item.tone" @click="handleClick(item.key)">
			{{ item.label }}
		</view>
	</view>
</template>

<script setup lang="uts">
type ServiceActionItem = {
	key: string
	label: string
	tone: string
}

defineProps({
	actions: {
		type: Array<ServiceActionItem>,
		default: [] as Array<ServiceActionItem>
	},
	compact: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits<{
	(e: 'action', key: string): void
}>()

function handleClick(key: string) {
	emit('action', key)
}
</script>

<style scoped>
.action-row {
	margin-top: 20rpx;
	flex-direction: row;
	gap: 16rpx;
}

.compact-row {
	margin-top: 12rpx;
}

.action-btn {
	flex: 1;
	padding: 20rpx 0;
	border-radius: 16rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: 700;
}

.ghost {
	background: #ffffff;
	color: #16324f;
	border-width: 2rpx;
	border-style: solid;
	border-color: #d7e0ea;
}

.primary {
	background: #1d4ed8;
	color: #ffffff;
}

.warn {
	background: #fff4e5;
	color: #b45309;
}

.success {
	background: #e8f7ef;
	color: #15803d;
}

.teal {
	background: #e6fffb;
	color: #0f766e;
}
</style>