import { DocsCallout } from '@/components/docs/docs-callout';
import { DocsCard } from '@/components/docs/docs-card';
import type { DocBlock, DocSection } from '@/docs/types';

type Props = {
    sections: DocSection[];
};

function DocBlockRenderer({ block }: { block: DocBlock }) {
    switch (block.type) {
        case 'paragraph':
            return (
                <p className="leading-7 text-muted-foreground">{block.text}</p>
            );
        case 'list':
            return (
                <ul className="my-3 list-disc space-y-2 pl-6 text-muted-foreground">
                    {block.items.map((item) => (
                        <li key={item} className="leading-7">
                            {item}
                        </li>
                    ))}
                </ul>
            );
        case 'callout':
            return (
                <DocsCallout variant={block.variant} title={block.title}>
                    {block.text}
                </DocsCallout>
            );
        case 'cards':
            return (
                <div className="my-4 grid gap-3 sm:grid-cols-2">
                    {block.items.map((item) => (
                        <DocsCard
                            key={item.title}
                            title={item.title}
                            description={item.description}
                            slug={item.slug}
                        />
                    ))}
                </div>
            );
        default:
            return null;
    }
}

export function DocsContent({ sections }: Props) {
    return (
        <article className="space-y-10">
            {sections.map((section) => (
                <section key={section.id} id={section.id} className="scroll-mt-24">
                    <h2 className="mb-4 text-xl font-semibold tracking-tight text-foreground">
                        {section.heading}
                    </h2>
                    <div className="space-y-3">
                        {section.blocks.map((block, index) => (
                            <DocBlockRenderer key={`${section.id}-${index}`} block={block} />
                        ))}
                    </div>
                </section>
            ))}
        </article>
    );
}