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

interface Props {
    statements: TrustPrincipleContent[];
}

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

<Section density="compact" data-section="trustbar">
    <Container width="wide">
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {
                statements.map((statement) => (
                    <article class="rounded-[var(--radius-lg)] border border-[color:var(--color-border)] bg-[var(--surface-muted)] p-4">
                        <h2 class="m-0 text-base font-semibold text-[var(--color-foreground)]">
                            {statement.title}
                        </h2>
                        <p class="mt-2 text-sm leading-6 text-[var(--color-copy)]">
                            {statement.description}
                        </p>
                    </article>
                ))
            }
        </div>
    </Container>
</Section>