---
type Props = {
  name: string
  url: string
  count?: number
  style?: string | astroHTML.JSX.CSSProperties | null | undefined
}

const { name, url, count, style } = Astro.props
---

<style>
  .tag {
    color: var(--text-color-light);
    margin-left: calc(var(--spacer) / 2);
    margin-right: calc(var(--spacer) / 2);
    margin-bottom: calc(var(--spacer) / 2);
    white-space: nowrap;
    display: inline-block;
  }

  .tag::before {
    content: '#';
    margin-right: 1px;
    opacity: 0.65;
  }

  .count {
    font-size: var(--font-size-small);
    margin-left: calc(var(--spacer) / 6);
    opacity: 0.65;
  }
</style>

<a class="tag" href={url} style={style}>
  {name}
  {count && <span class="count">{count}</span>}
</a>