---
import Card from '@/components/primitives/Card.astro';
import type { MetricItem } from '@/types/site';

interface Props {
    item: MetricItem;
}

const { item } = Astro.props;
---

<Card variant="subtle">
    <p class="m-0 text-3xl font-semibold tracking-[-0.04em] text-[var(--color-ink-900)]">{item.value}</p>
    <p class="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-[var(--color-brand)]">
        {item.label}
    </p>
    <p class="mt-2 text-sm leading-6 text-[var(--color-copy)]">{item.description}</p>
</Card>