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

defineProps<{
  title: string;
  value: string;
  meta?: string;
  tone?: "blue" | "green" | "red" | "neutral";
  icon: Component;
}>();
</script>

<template>
  <section class="summary-metric" :class="`tone-${tone || 'neutral'}`">
    <div class="summary-icon">
      <component :is="icon" :size="16" aria-hidden="true" />
    </div>
    <div class="summary-copy">
      <span>{{ title }}</span>
      <strong>{{ value }}</strong>
    </div>
    <em v-if="meta" class="summary-meta">{{ meta }}</em>
  </section>
</template>
