---
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import { getTagList } from "@utils/content";
import { getTagUrl } from "@utils/url";
import { widgetManager, getComponentConfig } from "@utils/widget";
import ButtonTag from "@/components/common/buttonTag.astro";
import WidgetLayout from "./widgetLayout.astro";


const tags = await getTagList();

const COLLAPSED_HEIGHT = "7.5rem";

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

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

<WidgetLayout name={i18n(I18nKey.tags)} id={`tags-${side}`} isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
    <div class="flex gap-2 flex-wrap">
        {tags.map(t => (
            <ButtonTag href={getTagUrl(t.name)} label={`View all posts with the ${t.name.trim()} tag`}>
                {t.name.trim()}
            </ButtonTag>
        ))}
    </div>
</WidgetLayout>