"use client";
import { useState } from "react";
import { MarkdownRenderer } from "@/components/markdown/MarkdownRenderer";
import { TableOfContents } from "@/components/markdown/TableOfContents";

export default function AboutPage() {
  const [headings, setHeadings] = useState([] as { id: string; text: string; level: number }[]);
  return (
    <div className="grid grid-cols-1 md:grid-cols-[1fr_280px] gap-6 lg:gap-8">
      <div className="min-w-0">
        <h1 className="text-2xl font-bold">About</h1>
        <MarkdownRenderer contentPath={"en/sobre/quem-somos.md"} onHeadings={setHeadings} />
      </div>
      <aside className="min-w-0">
        <TableOfContents headings={headings} />
      </aside>
    </div>
  );
}