---
import Badge from '@/components/primitives/Badge.astro';
import Card from '@/components/primitives/Card.astro';
import Headline from '@/components/content/Headline.astro';
import Lead from '@/components/content/Lead.astro';
import type { IntegrationEntry } from '@/types/site';

interface Props {
    item: IntegrationEntry;
}

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

<Card class="h-full px-4 py-4" variant="subtle">
    <div class="flex items-center gap-3">
        <Badge tone="neutral">{item.category}</Badge>
        <Headline as="h3" size="card" class="text-base">
            {item.name}
        </Headline>
    </div>
    <Lead class="mt-3 max-w-72" size="small">
        {item.summary}
    </Lead>
    {item.note && <p class="mt-2 text-xs font-medium uppercase tracking-[0.14em] text-[var(--color-brand)]">{item.note}</p>}
</Card>