import GeneratingSection from "@/components/quiz-section/generating/index";
import QuestionFromSection from "@/components/quiz-section/question-from/index";
import QuestionLanguageSection from "@/components/quiz-section/question-language/index";
import QuestionToSection from "@/components/quiz-section/question-to/index";
import QuestionWhatLoveSection from "@/components/quiz-section/question-what-love/index";
import ResultsSection from "@/components/quiz-section/results/index";
import SplashSection from "@/components/quiz-section/splash/index";
import { type QuizSectionItem } from "@/types";

import styles from "./styles.module.scss";

const refsComponents = {
  SplashSection: SplashSection,
  QuestionToSection: QuestionToSection,
  QuestionWhatLoveSection: QuestionWhatLoveSection,
  QuestionLanguageSection: QuestionLanguageSection,
  QuestionFromSection: QuestionFromSection,
  GeneratingSection: GeneratingSection,
  ResultsSection: ResultsSection,
};

const QuizSection = ({ content }: { content: any }) => {
  const Component = refsComponents[content.type as keyof typeof refsComponents];

  return (
    <div className={styles.quizSection}>
      <Component
        key={content.id}
        {...content.content}
        setButtonState={content.setButtonState}
        clickButton={content.clickButton}
      />
    </div>
  );
};

export default QuizSection;