---
import '@/styles/pages/domande-esami.css'

import { PhosphorIcon } from '@/client/Icon'
import Footer from '@/components/Footer.astro'
import Header from '@/components/Header.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'

import database from '@/data/domande-esami.yaml'

const courseQuestionCounts = Object.fromEntries(
    database.questions.reduce((acc, question) => {
        acc.set(question.course, (acc.get(question.course) || 0) + 1)
        return acc
    }, new Map()),
)
---

<BaseLayout title="Domande Orali | PHC">
    <Header />
    <main>
        <h1>Domande Orali</h1>
        {
            database.groups.map(group => (
                <details open>
                    <summary>
                        <h2 id={group.id}>
                            <div class="details-closed">
                                <PhosphorIcon name="caret-down" />
                            </div>
                            <div class="details-openned">
                                <PhosphorIcon name="caret-up" />
                            </div>
                            {group.name}
                        </h2>
                    </summary>
                    <div class="wide-card-list">
                        {group.items
                            .filter(course => courseQuestionCounts[course] > 0)
                            .map(course => (
                                <a href={`/domande-esami/${course}`}>
                                    <div class="card">
                                        <h2>{database.names[course]}</h2>
                                        <div class="text">
                                            <p>{courseQuestionCounts[course] || 0} domande</p>
                                        </div>
                                    </div>
                                </a>
                            ))}
                    </div>
                </details>
            ))
        }

        <h3>Come Contribuire</h3>
        <div class="card large">
            <div class="text">
                <p>
                    Se hai raccolto delle domande da un orale, puoi inviarcele per email all'indirizzo
                    <a href="mailto:macchinisti@lists.dm.unipi.it"> macchinisti@lists.dm.unipi.it</a>.
                </p>
            </div>
        </div>
    </main>
    <Footer />
</BaseLayout>