---
import WidgetLayout from './WidgetLayout.astro'

import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'
import { getCategoryList } from '../../utils/content-utils'
import { getCategoryUrl } from '../../utils/url-utils'
import ButtonLink from '../control/ButtonLink.astro'

const categories = await getCategoryList()

const COLLAPSED_HEIGHT = '7.5rem'
const COLLAPSE_THRESHOLD = 5

const isCollapsed = categories.length >= COLLAPSE_THRESHOLD

interface Props {
  class?: string
  style?: string
}
const className = Astro.props.class
const style = Astro.props.style
---

<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}
                class={className} style={style}
>
    {categories.map((c) =>
        <ButtonLink
            url={getCategoryUrl(c.name)}
            badge={String(c.count)}
            label=`View all posts in the ${c.name} category`
        >
            {c.name}
        </ButtonLink>
    )}
</WidgetLayout>