---
import Badge from '@/components/primitives/Badge.astro';
import Card from '@/components/primitives/Card.astro';
import Container from '@/components/primitives/Container.astro';
import Headline from '@/components/content/Headline.astro';
import Lead from '@/components/content/Lead.astro';
import PrimaryCTA from '@/components/content/PrimaryCTA.astro';
import Section from '@/components/primitives/Section.astro';
import SectionHeader from '@/components/primitives/SectionHeader.astro';
import type { ProgressTeaserContent } from '@/types/site';

interface Props {
    content: ProgressTeaserContent;
}

const { content } = Astro.props;

function formatDate(date: Date): string {
    return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
    });
}
---

<Section layer="2" data-section="progress">
    <Container width="wide">
        <div class="space-y-8">
            <SectionHeader
                eyebrow="Visible progress"
                title={content.title}
                description={content.description}
            />
            <div class="space-y-4">
                {content.entries.map((entry) => (
                    <Card class="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-6">
                        <Badge tone="signal">{formatDate(entry.date)}</Badge>
                        <div>
                            <Headline as="h3" size="card">
                                {entry.title}
                            </Headline>
                            <Lead class="mt-2" size="body">
                                {entry.description}
                            </Lead>
                        </div>
                    </Card>
                ))}
            </div>
            <PrimaryCTA cta={content.cta} />
        </div>
    </Container>
</Section>