---
type Props = {
  id: number | string;
  title: string;
  text: string;
};

const { id, title, text } = Astro.props;
---

<Fragment>
  <a class="decoration-dotted" id={`note-${id}`} href={`#note-${id}`} title={title} data-tooltip>
    {text}
  </a>
  {Number.isInteger(id) ? <sup>{id}</sup> : null}
  <em class="sr-only"> ({title})</em>
</Fragment>
