'use client'
import React from 'react'
import type { MicroLearningContent } from '@/types'
import { ConceptExplainer } from './ConceptExplainer'
import { ScenarioQuiz } from './ScenarioQuiz'
import { Misconceptions } from './Misconceptions'
import { HowTo } from './HowTo'
import { ComparisonCard } from './ComparisonCard'
import { ReflectionPrompt } from './ReflectionPrompt'
import { FlashcardSet } from './FlashcardSet'
import { CaseStudy } from './CaseStudy'
import { GlossaryAnchor } from './GlossaryAnchor'
import { MythVsEvidence } from './MythVsEvidence'

interface Props {
  content: MicroLearningContent
  onComplete: () => void
}

export function MicroLearningRenderer({ content, onComplete }: Props) {
  switch (content.type) {
    case 'concept_explainer':
      return <ConceptExplainer content={content} onComplete={onComplete} />
    case 'scenario_quiz':
      return <ScenarioQuiz content={content} onComplete={onComplete} />
    case 'misconceptions':
      return <Misconceptions content={content} onComplete={onComplete} />
    case 'how_to':
      return <HowTo content={content} onComplete={onComplete} />
    case 'comparison_card':
      return <ComparisonCard content={content} onComplete={onComplete} />
    case 'reflection_prompt':
      return <ReflectionPrompt content={content} onComplete={onComplete} />
    case 'flashcard_set':
      return <FlashcardSet content={content} onComplete={onComplete} />
    case 'case_study':
      return <CaseStudy content={content} onComplete={onComplete} />
    case 'glossary_anchor':
      return <GlossaryAnchor content={content} onComplete={onComplete} />
    case 'myth_vs_evidence':
      return <MythVsEvidence content={content} onComplete={onComplete} />
    default: {
      const _exhaustive: never = content
      return (
        <div style={{ color: 'var(--fg-muted)', fontSize: 'var(--t-body)' }}>
          Unknown content type.
        </div>
      )
    }
  }
}
