---

import {CategoryMap} from "../../utils/content-utils";
import {getCategoryUrl} from "../../utils/url-utils";
import ButtonLink from "../control/ButtonLink.astro";

interface Props {
    categories: CategoryMap;
}

const {categories} = Astro.props;

---
<div>
    {Object.entries(categories).map(([key, value]) =>
        <ButtonLink url={getCategoryUrl(key)} badge={value.count} label=`View all posts in the ${value.name} category`>{value.name}</ButtonLink>
        <div class="ml-2">
            {Object.keys(value.children).length > 0 && <Astro.self categories={value.children}></Astro.self>}
        </div>
    )}
</div>