<script lang="ts">
    import type { EngagementItem } from '$lib/types/service-page';

    const {
        items,
        sectionId = 'how-engagements-work',
        headingId = 'engagements-heading',
        heading = 'How engagements work',
        intro,
        outro,
    }: {
        items: EngagementItem[];
        sectionId?: string;
        headingId?: string;
        heading?: string;
        intro?: string;
        outro?: string;
    } = $props();
</script>

<section id={sectionId} class="section" aria-labelledby={headingId}>
    <div class="container narrow">
        <h2 id={headingId}>{heading}</h2>
        {#if intro}
            <p>{intro}</p>
        {/if}
        <dl class="engagements-list">
            {#each items as item}
                <dt>{item.term}</dt>
                <dd>{item.definition}</dd>
            {/each}
        </dl>
        {#if outro}
            <p>{outro}</p>
        {/if}
    </div>
</section>
