---
import type { TableOfContentEntry } from "src/shared/payload/payload-sdk";
import TableOfContentItem from "./components/TableOfContentItem.astro";
import { Icon } from "astro-icon/components";

interface Props {
  toc: TableOfContentEntry[];
}

const { toc } = Astro.props;
---

{
  /* ------------------------------------------- HTML ------------------------------------------- */
}

<div id="container">
  <div id="title">
    <Icon name="material-symbols:list-alt-outline" width={24} height={24} />
    <p>Table of Content</p>
  </div>
  <ol>
    {toc.map((entry) => <TableOfContentItem entry={entry} />)}
  </ol>
</div>

{
  /* ------------------------------------------- CSS -------------------------------------------- */
}

<style>
  #container {
    & > #title {
      display: flex;
      place-items: center;
      gap: 8px;
      margin-bottom: 0.75em;

      & > p {
        font-size: 1.5em;
        font-weight: 600;
        translate: 0px -0.1em;
      }
    }
  }
</style>