---
export type Props = {
  name: string
  href: string
  count?: number
}

const { name, href, count } = Astro.props
---

<a {href}>
  <div>
    {name}
    {count && <i>{count}</i>}
  </div>
</a>

<style>
  div {
    display: inline-block;
    margin: 0.25rem;
    padding: 0 0.5rem;
    background-color: var(--clr-primary);
    width: max-content;
  }

  i {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--clr-secondary);
  }
</style>