import { Box, Typography } from "@mui/material";
import { splitUserText, timewebContent } from "./helper";

interface Props {
    title: string;
    id: number;
    answer: string;
    quizId: string;
    questionId: string;
}

export const ListOfImagesCardAnswer = ({
    title,
    id,
    answer,
    quizId,
    questionId,
}: Props) => {

    return <Box
        sx={{
            display: "flex",
            alignItems: "start",
            gap: "13px",
        }}
        onClick={(e) => e.stopPropagation()}
    >
        <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
            {id + 1}. {title}.
        </Typography>
        <Box>
            {
                splitUserText(answer)
                    .filter(text => text.length)
                    .map(text => {
                        const { Image, Description } = JSON.parse(text)
                        return (<>
                            <img
                                width={40}
                                height={40}
                                src={timewebContent(quizId, Image, questionId)}
                            />
                            <Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>{Description}</Typography>
                        </>)

                    })
            }
        </Box>
    </Box>
};