import React from "react";
import { QuestionSection, TitleAndSubtitle } from "../style";
import Response from "../components/response";
import ResponseAudio from "../components/responseAudio";
import QuestionDropdown from "../components/questionDropdown";
import ResponseAudioV2 from "../components/responseAudio.v2";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const WordPlayText = ({ data, answerData, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <QuestionSection>
      <QuestionDropdown>
        <>
          <li>
            <h3>{findText("Instruction")}</h3>
            <p>{data?.question_data?.instruction}</p>
            <ResponseAudioV2
              key={data?.question_data?.voice_type_data?.audio?.id}
              audioData={data?.question_data?.voice_type_data?.audio}
              streamUrl={data?.question_data?.voice_type_data?.audio?.url}
              url={
                data?.question_data?.voice_type_data?.audio?.uploaded_media_url
              }
            />
          </li>
        </>
      </QuestionDropdown>

      <Response
        response={answerData?.answer?.data?.answer_text}
        isPersonal={isPersonal}
      />

      {data?.question_data?.answer && (
        <Response
          title={findText("Correct response")}
          response={data?.question_data?.answer}
        />
      )}
    </QuestionSection>
  );
};
export default WordPlayText;
