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

    const {
        section,
    }: {
        section: ServiceSectionContent;
    } = $props();

    const headingId = $derived(section.headingId ?? `${section.id}-heading`);
    const sectionClasses = $derived(
        ['section', section.sectionClass].filter(Boolean).join(' '),
    );
    const containerClass = $derived(
        section.narrowContainer === false ? 'container' : 'container narrow',
    );
    const listClass = $derived(
        [section.bulletsListClass, 'content-list'].filter(Boolean).join(' '),
    );
</script>

<section id={section.id} class={sectionClasses} aria-labelledby={headingId}>
    <div class={containerClass}>
        <h2 id={headingId} class={{ 'sr-only': section.headingSrOnly ?? false }}>
            {section.heading}
        </h2>

        {#if section.lede}
            <p>{section.lede}</p>
        {/if}

        {#each section.paragraphs ?? [] as p}
            <p>{p}</p>
        {/each}

        {#each section.subsections ?? [] as sub, subIndex}
            {@const subId = sub.headingId ?? `${section.id}-sub-${subIndex}`}
            <h3 id={subId}>{sub.heading}</h3>
            {#each sub.paragraphs ?? [] as p}
                <p>{p}</p>
            {/each}
            {#if (sub.bullets?.length ?? 0) > 0}
                <ul class="content-list">
                    {#each sub.bullets as bullet}
                        <li>{bullet}</li>
                    {/each}
                </ul>
            {/if}
        {/each}

        {#if (section.bullets?.length ?? 0) > 0}
            <ul class={listClass}>
                {#each section.bullets as bullet}
                    <li>{bullet}</li>
                {/each}
            </ul>
        {/if}

        {#if (section.orderedBullets?.length ?? 0) > 0}
            <ol class="content-list ordered">
                {#each section.orderedBullets as bullet}
                    <li>{bullet}</li>
                {/each}
            </ol>
        {/if}

        {#each section.trailingParagraphs ?? [] as p}
            <p>{p}</p>
        {/each}

        {#if (section.footerLinks?.length ?? 0) > 0}
            <p>
                {#each section.footerLinks as link, i}
                    {#if i > 0}
                        <span aria-hidden="true"> · </span>
                    {/if}
                    <a href={link.href}>{link.label}</a>
                {/each}
            </p>
        {/if}
    </div>
</section>
