---
import * as m from '@/messages';
import type { CollectionEntry } from 'astro:content';
import Collapsible from '@/lib/components/Collapsible/Collapsible.svelte';

export interface FaqItem extends CollectionEntry<'faq'> {
    data: {
        question: string;
        category: string;
    };
    rendered: {
        html: string;
    };
    id: string;
}

export interface FaqProps {
    data: Record<string, FaqItem[]>;
}

const { data } = Astro.props as FaqProps;
---

<h1 class="zm-faq-title zm-u-align-center u-m-x-auto">{m.faqTitle()}</h1>
<p class="preamble zm-u-align-center u-m-x-auto">{m.faqPreamble()}</p>
<p class="zm-faq-paragraph zm-u-align-center u-m-x-auto">{m.faqTextParagraph1()} <a href="https://lists.iis.se/postorius/lists/zonemaster-users.lists.iis.se">{m.faqParagraph1Link()}</a></p>
{
    Object.keys(data).sort().map((category) => (
        <section class="rhythm zm-faq-section">
            <header class="u-m-b-0 zm-faq-section__header">{category}</header>
            {data[category].map((item: FaqItem) => (
                <Collapsible
                    client:load
                    title={item.data.question}
                    id={item.id.split('/').pop()?.replace('.md', '')}
                    content={item.rendered.html}
                />
            ))}
        </section>
    ))
}
