import React from 'react';
import { Flex } from '@/atoms/flex';
import { Typo } from '@/atoms/typo';
import { InfoCircledIcon } from '@/icon';
import { useCurriculumContext } from '../curriculum-context';
import CurriculumVideo from './curriculum-video';
import CurriculumReview from './curriculum-review';
import CurriculumAiTraning from './curriculum-ai-traning';

export function CurriculumBody(): React.ReactNode {
  const { selectedItem, selectedSectionTitle } = useCurriculumContext();

  switch (selectedItem.type) {
    case 'video':
      return <CurriculumVideo item={selectedItem} />;
    case 'review':
      return (
        <CurriculumReview
          item={selectedItem}
          sectionTitle={selectedSectionTitle?.title}
        />
      );
      case 'aiTraining':
        return <CurriculumAiTraning item={selectedItem}/>
    default:
      return (
        <Flex
          align="center"
          direction="column"
          gap="2"
          height="100%"
          justify="center"
          width="100%"
        >
          <InfoCircledIcon height={24} width={24} />
          <Typo>컨텐츠를 로딩 할 수 없습니다</Typo>
          <Typo align="center" color="gray" variant="caption">
            {`[debug info]
            ${JSON.stringify(selectedItem)}`}
          </Typo>
        </Flex>
      );
  }
} 