'use client';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { AccordionItem, parseSections, SECTION_ICONS } from '@/components/AccordionItem';

export default function SavedInterpretation({ interpretation }: { interpretation: string }) {
    const sections = parseSections(interpretation);

    if (sections.length > 0) {
        return (
            <div className="space-y-3">
                {sections.map((section, idx) => (
                    <AccordionItem
                        key={idx}
                        title={section.title}
                        content={section.content}
                        icon={SECTION_ICONS[idx] || '📌'}
                        defaultOpen={idx === 0}
                    />
                ))}
            </div>
        );
    }

    return (
        <article className="prose prose-lg max-w-none prose-indigo">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>
                {interpretation}
            </ReactMarkdown>
        </article>
    );
}