---
import Node from '@/components/markdoc/Node.astro'
import type { Footnote } from '@/lib/markdoc/types'

type Props = { footnotes: Footnote[] }
const { footnotes } = Astro.props
---

{footnotes.length > 0 && (
  <section class="footnotes">
    <h2 class="footnotes__title">Notes</h2>
    <ol>
      {footnotes.map((footnote) => (
        <li id={`fn-${footnote.n}`}>
          <Node node={footnote.children} />{' '}
          <a href={`#fnref-${footnote.n}`} class="footnotes__back" aria-label="Back to text">
            ↩
          </a>
        </li>
      ))}
    </ol>
  </section>
)}