import React from "react";
import {
  QuizQuestionMedia,
  QuizQuestionText,
} from "./style/quizQuestion.style";
import PreviewImage from "./previewImage";
import VideoPlayer from "../../../video-player";

/**
 * @param {Object} props
 * @param {Object} props.data
 * @returns {React.ReactNode}
 */
const QuizQuestion = ({ data }) => {
  const question = data?.question_data?.question_format_data;

  switch (question.type) {
    case "IMAGE":
      return (
        <QuizQuestionMedia>
          <PreviewImage 
            height="290px" 
            fileId={question?.file?.id || question?.file?.file_id}
            src={question?.file?.url} 
          />
        </QuizQuestionMedia>
      );
    case "VIDEO":
      return (
        <QuizQuestionMedia>
          <VideoPlayer 
            fileId={question?.file?.id || question?.file?.file_id} 
            height="290px" 
          />
        </QuizQuestionMedia>
      );
    case "TEXT":
      return (
        <QuizQuestionText>
          <p>{question?.text}</p>
        </QuizQuestionText>
      );
    default:
      return null;
  }
};

export default QuizQuestion;
