---
interface Props {
  name: string;
  count?: number;
  href?: string;
  variant?: "default" | "small";
}

const { name, count, href, variant = "default" } = Astro.props;
const linkHref = href || `/tags/${name}`;
const isSmall = variant === "small";
const textSize = isSmall ? "text-sm" : "text-base";
---

<a href={linkHref}>
  <span
    class={`${textSize} text-neutral-400 font-semibold bg-neutral-900 px-2 py-2 hover:bg-neutral-700`}
  >
    #{name}{count !== undefined && <sup>{count}</sup>}
  </span>
</a>
