type Heading = {
    id: string;
    text: string;
    level: number;
};

export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
    if (headings.length === 0) return null;

    return (
        <details className="mb-8 border-y border-line py-4">
            <summary className="eyebrow cursor-pointer list-none">
                Contents
            </summary>
            <ul className="mt-4 space-y-2">
                {headings.map((heading) => (
                    <li
                        key={heading.id}
                        style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
                    >
                        <a
                            href={`#${heading.id}`}
                            className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"
                        >
                            {heading.text}
                        </a>
                    </li>
                ))}
            </ul>
        </details>
    );
}
