---
import TableOfContents from "./toc";
import type { ConfigHeading, TypeTOC } from "./types.d.ts";
import type {
  TypeData,
  QuickshellFunction,
  // QuickshellSignal,
  // QuickshellVariant,
  // QuickshellProps,
} from "@config/_types";

export interface Props {
  title?: string;
  headings?: ConfigHeading[];
  type?: TypeData;
  mobile: boolean;
}

const { title, headings, type, mobile } = Astro.props;

const types: TypeTOC | null = type
  ? {
      properties: Object.keys(type.properties ?? {}),
      functions: (type.functions ?? []).map((f: QuickshellFunction) => f.name),
      signals: Object.keys(type.signals ?? {}),
      variants: Object.keys(type.variants ?? {}),
    }
  : null;
---

{((headings?.length ?? 0) != 0 || types) &&
  <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
    <TableOfContents
      title={title}
      config={headings}
      type={types}
      mobile={mobile}
      client:idle
    />
  </div>}