---
import { getCategoryList } from "@utils/content";
import { widgetManager, getComponentConfig } from "@utils/widget";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import ButtonLink from "@/components/common/buttonLink.astro";
import WidgetLayout from "./widgetLayout.astro";


const categories = await getCategoryList();

const COLLAPSED_HEIGHT = "7.5rem";

// 使用统一的组件管理器检查是否应该折叠
const categoriesComponent = getComponentConfig("categories");
const isCollapsed = categoriesComponent ? widgetManager.isCollapsed(categoriesComponent, categories.length) : false;

interface Props {
    class?: string;
    style?: string;
    side?: string;
}
const { class: className, style, side = "default" } = Astro.props;
---

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