---
const allPosts = await Astro.glob("../../pages/blog/posts/*.md");
const languages = [
    ...new Set(allPosts.map((post) => post.frontmatter.languages).flat()),
];
import Capsule from "../ui/Capsule.astro";

const { variant = "default" } = Astro.props;

const baseClasses = "flex flex-wrap";

const variantClasses = {
    default: "gap-3 max-lg:gap-1",
    vertical: "gap-6 flex-col"
} as const;

const classes = `${baseClasses} ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default}`;
---

<div class={classes}>
    {languages.map((language) => (
        <Capsule lang={language} linkEnabled={true} size="md" />
    ))}
</div>