---
import FeatureItem from '@/components/content/FeatureItem.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 { FeatureItemContent } from '@/types/site';

interface Props {
    description?: string;
    eyebrow?: string;
    items: FeatureItemContent[];
    title: string;
    titleHtml?: string;
    tone?: 'default' | 'tinted';
}

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

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