import {Box, Typography, useTheme} from "@mui/material";
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
import {QuizSettingsConfig} from "@model/settingsData.ts";
import {FC} from "react";

type ContactTextBlockProps = {
    settings: QuizSettingsConfig;
}

export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 850;
    const isTablet = useRootContainerSize() < 1000;
    return (
        <Box
            sx={{
                flexGrow: isMobile ? 0 : 1,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
                margin: isMobile ? 0 : "40px 0",
                padding: isMobile ? "0" : "0 40px"
            }}
        >
            <Box
                sx={{
                    maxWidth: isMobile ? "100%" : isTablet ? "410px" : "630px",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "flex-start",
                    justifyContent: "center",
                    padding: isMobile ? "40px 20px 0 20px" : "0",
                    mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
                }}
            >
                <Typography
                    sx={{
                        textAlign: isTablet ? undefined : "center",
                        fontSize: "24px",
                        lineHeight: "normal",
                        fontWeight: 501,
                        color: theme.palette.text.primary,
                        wordBreak: "break-word",
                    }}
                >
                    {settings.cfg.formContact.title ||
                        "Заполните форму, чтобы получить результаты теста"}
                </Typography>
                {settings.cfg.formContact.desc && (
                    <Typography
                        sx={{
                            color: theme.palette.text.primary,
                            m: "20px 0",
                            fontSize: "18px",
                            wordBreak: "break-word",
                        }}
                    >
                        {settings.cfg.formContact.desc}
                    </Typography>
                )}
            </Box>
        </Box>
    )
}