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

type ContactTextBlockProps = {
  settings: QuizSettingsConfig;
};

export const ContactTextBlock: FC<ContactTextBlockProps> = ({ settings }) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 850;
  const isTablet = useRootContainerSize() < 1000;
  const { t } = useTranslation();
  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 || t("Fill out the form to receive your test results")}
        </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>
  );
};