---
import type { Heading } from "../../core/types.ts";
import Icon from "../Icon.astro";

interface Props {
  /** Headings to list (already filtered to the depths shown in the TOC). */
  headings: Heading[];
  /** Localized "On this page" heading. */
  title: string;
  /**
   * `mobile` renders the collapsible `<details>` shown above content on narrow
   * viewports; `desktop` renders the sticky aside list shown on wide ones.
   */
  variant: "mobile" | "desktop";
}

const { headings, title, variant } = Astro.props;
---

{
  headings.length > 0 && variant === "mobile" && (
    <details class="group mx-auto mb-6 max-w-content rounded-blume border border-border xl:hidden">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 font-medium text-foreground text-sm [&::-webkit-details-marker]:hidden">
        <span>{title}</span>
        <Icon
          class="text-muted-foreground transition-transform group-open:rotate-180"
          name="chevron-down"
          size={16}
        />
      </summary>
      <blume-toc class="block">
        <ul class="m-0 list-none border-border border-t p-2">
          {headings.map((heading) => (
            <li style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}>
              <a
                class="block rounded-md px-2 py-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground aria-[current=location]:font-medium aria-[current=location]:text-foreground"
                href={`#${heading.slug}`}
              >
                {heading.text}
              </a>
            </li>
          ))}
        </ul>
      </blume-toc>
    </details>
  )
}
{
  headings.length > 0 && variant === "desktop" && (
    <>
      <p class="mb-3 font-semibold text-foreground text-sm">{title}</p>
      <blume-toc class="block">
        <ul class="m-0 list-none p-0">
          {headings.map((heading) => (
            <li style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}>
              <a
                class="block py-1.5 text-muted-foreground transition-colors hover:text-foreground aria-[current=location]:font-medium aria-[current=location]:text-foreground"
                href={`#${heading.slug}`}
              >
                {heading.text}
              </a>
            </li>
          ))}
        </ul>
      </blume-toc>
    </>
  )
}