---
import Card from '@/components/primitives/Card.astro';
import Eyebrow from '@/components/content/Eyebrow.astro';
import Lead from '@/components/content/Lead.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>
    <Eyebrow class="mt-2">
        {item.label}
    </Eyebrow>
    <Lead class="mt-2" size="small">
        {item.description}
    </Lead>
</Card>