---
import TrustPrincipleCard from '@/components/content/TrustPrincipleCard.astro';
import Container from '@/components/primitives/Container.astro';
import Grid from '@/components/primitives/Grid.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import type { TrustPrincipleContent } from '@/types/site';

interface Props {
    description?: string;
    eyebrow?: string;
    items: TrustPrincipleContent[];
    title: string;
    titleHtml?: string;
}

const { description, eyebrow, items, title, titleHtml } = Astro.props;
---

<Section layer="2" tone="warm">
    <Container width="wide">
        <div class="space-y-8">
            <SectionHeader eyebrow={eyebrow} title={title} titleHtml={titleHtml} description={description} />
            <Grid cols="3">
                {items.map((item) => <TrustPrincipleCard item={item} />)}
            </Grid>
        </div>
    </Container>
</Section>