---
import { getRelativeLocaleUrl } from "astro:i18n";
import IconHash from "@/assets/icons/IconHash.svg";
import config from "@/config";

type Props = {
  tag: string;
  tagName: string;
  size?: "sm" | "lg";
};

const { tag, tagName, size = "lg" } = Astro.props;

const locale = Astro.currentLocale ?? config.site.lang;
---

<li>
  <a
    href={getRelativeLocaleUrl(locale, `tags/${tag}/`)}
    transition:name={tag}
    class:list={[
      "flex items-center gap-0.5",
      "border-foreground border-b-2 border-dashed",
      "hover:border-accent hover:text-accent hover:-mt-0.5",
      "focus-visible:text-accent focus-visible:border-none",
      { "text-sm": size === "sm" },
      { "text-lg": size === "lg" },
    ]}
  >
    <IconHash
      class:list={[
        "opacity-80",
        { "size-5": size === "lg" },
        { "size-4": size === "sm" },
      ]}
    />
    {tagName}
  </a>
</li>