import { useMemo } from "react";
import { CompetitionTimelinePanel } from "./competition/CompetitionTimelinePanel";
import { parseCompetitionTabsContent } from "./competition/parseContent";

type Content = Record<string, unknown>;

/**
 * Legacy nested competition content renderer.
 * Tab navigation now lives exclusively in Grade Hero → Competition Navigation.
 * Prefer separate Orion Competitions / Public Competitions page blocks.
 */
export function CompetitionTabsBlock({ content }: { content?: Content }) {
    const parsed = useMemo(() => parseCompetitionTabsContent(content), [content]);
    const activeTab = parsed.tabs.find((tab) => tab.id === parsed.defaultTabId) ?? parsed.tabs[0];

    if (!activeTab) {
        return null;
    }

    return (
        <section className="py-16 bg-background">
            <div className="container mx-auto px-6 max-w-4xl">
                <CompetitionTimelinePanel panel={activeTab.panel} embedded />
            </div>
        </section>
    );
}