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

interface Props {
    item: TrustPrincipleContent;
}

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

<Card class="h-full">
    <Headline as="h3" size="card">
        {item.title}
    </Headline>
    <Lead class="mt-3" size="body">
        {item.description}
    </Lead>
    {item.note && <Lead class="mt-4 text-[var(--color-brand)]" size="small">{item.note}</Lead>}
</Card>