<template>
	<div class="mintel-stat-card" @click="$emit('click')">
		<div class="stat-icon">
			<v-icon :name="icon" large />
		</div>
		<div class="stat-content">
			<span class="stat-label">{{ label }}</span>
			<span class="stat-value">{{ value }}</span>
		</div>
		<v-icon name="chevron_right" class="arrow" />
	</div>
</template>

<script setup lang="ts">
defineProps<{
	label: string;
	value: string | number;
	icon: string;
}>();

defineEmits(['click']);
</script>

<style scoped>
.mintel-stat-card {
	background: var(--theme--background-normal);
	border: 1px solid var(--theme--border);
	padding: 24px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.mintel-stat-card:hover {
	border-color: var(--theme--primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.stat-icon {
	width: 56px;
	height: 56px;
	background: var(--theme--background-subdued);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--theme--primary);
}

.stat-content {
	display: flex;
	flex-direction: column;
}

.stat-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--theme--foreground-subdued);
	letter-spacing: 0.5px;
}

.stat-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--theme--foreground);
}

.arrow {
	position: absolute;
	right: 24px;
	opacity: 0.2;
}

.mintel-stat-card:hover .arrow {
	opacity: 1;
	color: var(--theme--primary);
}
</style>
