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

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

export const ListOfOptionsCardAnswer = ({
    title,
    id,
    answer
}: 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 => <Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>{text}</Typography>)
            }
        </Box>
                      
                     
    </Box>
};