Webserver/components/mdx/MobileTableOfContents.tsx

'use client';

import { useState } from 'react';

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

export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
    const [isOpen, setIsOpen] = useState(false);

    if (headings.length === 0) return null;

    return (
        <div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
            <button
                onClick={() => setIsOpen(!isOpen)}
                aria-expanded={isOpen}
                aria-controls="mobile-toc"
                className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
            >
                <span>Table of Contents</span>
                <span className={`transform transition-transform ${isOpen ? 'rotate-180' : ''}`}>
                    ▼
                </span>
            </button>

            {isOpen && (
                <ul id="mobile-toc" className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
                    {headings.map((heading) => (
                        <li
                            key={heading.id}
                            style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
                        >
                            <a
                                href={`#${heading.id}`}
                                onClick={() => setIsOpen(false)}
                                className="block text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 truncate"
                            >
                                {heading.text}
                            </a>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}