<script lang="ts">
    const {
        showTitle = false,
        title = 'Who this is for',
        whoForList,
        whoNotList,
        whoForHeading = 'Good fit',
        whoNotHeading = 'Who this is not for',
    }: {
        title?: string;
        showTitle?: boolean;
        whoForList: string[];
        whoNotList: string[];
        whoForHeading?: string;
        whoNotHeading?: string;
    } = $props();
</script>

<section id="who-its-for" class="section" aria-labelledby="who-for-heading">
    <div class="container">
        <h2 id="who-for-heading" class={['title', { 'sr-only': !showTitle }]}>{title}</h2>
        <div class="who-grid">
            <div class="who-block">
                <h3 id="who-for-list-heading" class="list-heading">{whoForHeading}</h3>
                <ul class="content-list" aria-labelledby="who-for-list-heading">
                    {#each whoForList as item, index (index)}
                        <li>{item}</li>
                    {/each}
                </ul>
            </div>
            <div class="who-block">
                <h3 id="who-not-list-heading" class="list-heading">{whoNotHeading}</h3>
                <ul class="content-list" aria-labelledby="who-not-list-heading">
                    {#each whoNotList as item, index (index)}
                        <li>{item}</li>
                    {/each}
                </ul>
            </div>
        </div>
    </div>
</section>

<style>
    .who-grid {
        display: grid;
        gap: var(--space-xxl);
        grid-template-columns: 1fr 1fr;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .title,
    .list-heading {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-md);
    }
</style>
