<script setup lang="ts">
import type { Component } from 'vue'

defineProps<{
  icon: Component
  label: string
  value: string | number
  accentColor?: string
}>()
</script>

<template>
  <div class="metric-card" :style="{ '--card-accent': accentColor || 'var(--accent-cyan)' }">
    <div class="metric-icon">
      <component :is="icon" :size="16" />
    </div>
    <div class="metric-info">
      <span class="metric-value">{{ value }}</span>
      <span class="metric-label">{{ label }}</span>
    </div>
  </div>
</template>

<style scoped>
.metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  transition: all var(--transition-mid);
}

.metric-card:hover {
  border-color: var(--card-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 30%, transparent);
  transform: translateY(-2px);
}

.metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--card-accent) 12%, transparent);
  color: var(--card-accent);
}

.metric-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--card-accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 40%, transparent);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
</style>
