---
 import { getCollection, getEntry } from 'astro:content';
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
import VocabWord from '@/components/VocabWord.astro';
 
function titlecase(str: string) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

 export async function getStaticPaths() {
    const vocabList = await getCollection("vocabList");
     return vocabList.map((category) => ({
         params: { category: category.id },
     }));
    }
    
const { category } = Astro.params;    
const entry = await getEntry("vocabList", category);
entry!.id = titlecase(entry!.id);


const wordtypes = [...new Set(entry!.data.words.map((word) => word.type))];
const wordsByType = wordtypes.map((type) => ({
    type: titlecase(type) + "s",
    words: entry!.data.words.filter((word) => word.type === type),
}));

const headings = wordsByType.map(({type, words}) => {
    return [{
        text: type,
        depth: 2,
        slug: type.toLowerCase().replace(/\s+/g, '-'),
    }].concat(words.map((word) => ({
        text: word.hindi,
        depth: 3,
        slug: word.hindi.toLowerCase().replace(/\s+/g, '-'),
    })));
})[0];
---

<StarlightPage 
    frontmatter={{ title: "Vocabulary: " + (entry?.id ?? "Uncategorized") }}
    headings={headings}
>
    <div>
        { entry?.data.about}
    </div>
    {
        wordsByType.map(({type, words}) => (
            <div class="word-type-section">
                    <AnchorHeading level="3" id={type}>{type}</AnchorHeading>
                    <ul class="part-of-speech-list">
                    {
                        words.map((word) => (
                                <VocabWord {word} />
                        ))
                    }
                    </ul>
            </div>
        ))
    }

</StarlightPage>