frontPanel/src/pages/QuizAnswersPage/CardAnswer.tsx

import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC, useState } from "react";
import { ContactIcon } from "./icons/ContactIcon";
import { MessageIcon } from "./icons/MessageIcon";
import { PhoneIcon } from "./icons/PhoneIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

import homeImg from "./images/home.png";
import videoFrame from "./images/videoFrame.png";
import { EyeIcon } from "./icons/EyeIcon";

export const CardAnswer: FC = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  return (
    <Box
      onClick={() => setIsOpen(!isOpen)}
      sx={{
        borderRadius: "12px",
        maxWidth: isTablet ? "450px" : "auto",
        width: "100%",
        boxShadow:
          "0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
      }}
    >
      <Box
        sx={{
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          flexDirection: isTablet ? "column" : "-moz-initial",
        }}
      >
        <Box
          sx={{
            flexDirection: isTablet ? "column" : "-moz-initial",
            cursor: "pointer",
            p: "20px",
            borderRadius: isTablet
              ? "12px 12px 0 0"
              : isOpen
                ? "12px 0 0 0"
                : "12px 0 0 12px",
            display: "flex",
            alignItems: "flex-start",
            background: "#FFF",
            width: "100%",
          }}
        >
          <Box
            sx={{
              width: isTablet ? "100%" : "auto",
              display: "flex",
              alignItems: "flex-start",
              flexDirection: isTablet ? "row-reverse" : "-moz-initial",
              justifyContent: isTablet ? "space-between" : "-moz-initial",
              pb: isTablet ? "20px" : "0",
              mb: isTablet ? "20px" : "0",
              borderBottom: isTablet
                ? "1px solid rgba(154, 154, 175, 0.50)"
                : "0",
            }}
          >
            <Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: "30px",
                  height: "30px",
                  borderRadius: "50%",
                  background: "#EEE4FC",
                  color: "#7E2AEA",
                }}
              >
                1
              </Box>
              <ArrowDownIcon
                style={{
                  transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
                }}
                fontSize="10px"
              />
            </Box>

            <Typography
              sx={{
                ml: isTablet ? "0" : "50px",
                mr: isTablet ? "0" : "188px",
                fontSize: "18px",
                color: "#7E2AEA",
                maxWidth: "143px",
                width: "100%",
              }}
            >
              Сегодня в 18:59 Россия, Москва
            </Typography>
          </Box>

          <Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
              <ContactIcon />
              <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                Екатерина
              </Typography>
            </Box>
            <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
              <MessageIcon />
              <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                exampleemail@gmail.com
              </Typography>
            </Box>
            <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
              <PhoneIcon />
              <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                +79876543210
              </Typography>
            </Box>
          </Box>

          {!isTablet && (
            <Typography
              sx={{
                ml: "auto",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "#FB5607",
                borderRadius: "8px",
                width: "77px",
                height: "36px",
                color: "white",
              }}
            >
              Новая
            </Typography>
          )}
        </Box>

        <Box
          sx={{
            borderRadius: "8px",
            p: isTablet ? "20px" : "0",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: isTablet ? "space-between" : "center",
            width: isTablet ? "100%" : "100px",
            background: "#F2F3F7",
          }}
        >
          {isTablet ? (
            <>
              <Typography
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  background: "#FB5607",
                  borderRadius: "8px",
                  width: "77px",
                  height: "36px",
                  color: "white",
                }}
              >
                Новая
              </Typography>
              <Box sx={{ display: "flex", alignItems: "center" }}>
                <EyeIcon />
                <span
                  style={{
                    height: "50px",
                    width: "2px",
                    background: "rgba(154, 154, 175, 0.50)",
                    margin: "0 20px",
                  }}
                />
                <DeleteIcon color="#4D4D4D" fontSize="34px" />
              </Box>
            </>
          ) : (
            <DeleteIcon color="#4D4D4D" fontSize="34px" />
          )}
        </Box>
      </Box>

      {isOpen && (
        <Box
          sx={{
            borderRadius: "12px",
            maxWidth: isTablet ? "450px" : "auto",
            width: "100%",
            boxShadow:
              "0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
          }}
        >
          <Box
            sx={{
              p: "20px",
              borderTop: "1px solid #F1F2F6",
              background: "#FFF",
              borderRadius: "0 0 12px 12px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Ответы
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              gap: isTablet ? "0" : "149px",
              p: "20px",
              flexDirection: isTablet ? "column" : "-moz-initial",
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: "15px",
                mt: "20px",
              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  1.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 1 вопрос
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  2.
                </Typography>
                <img src={homeImg} style={{ width: "40px", height: "40px" }} />
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  3.
                </Typography>
                <Typography
                  sx={{
                    fontSize: "18px",
                    color: "#7E2AEA",
                    borderBottom: "1px solid #7E2AEA",
                  }}
                >
                  ответ.doc
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  4.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 4 вопрос
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  5.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 5 вопрос
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  6.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 6 вопрос
                </Typography>
              </Box>
            </Box>

            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: "15px",
                mt: "20px",
              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  7.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 7 вопрос
                </Typography>
              </Box>

              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  8.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 8 вопрос
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  9.
                </Typography>
                <Typography sx={{ fontSize: "18px" }}>
                  Ответ на 9 вопрос
                </Typography>
              </Box>
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                  10.
                </Typography>
                <img
                  src={videoFrame}
                  style={{ width: "40px", height: "40px" }}
                />
              </Box>
            </Box>
          </Box>

          <Box
            sx={{
              p: "20px",
              borderTop: "1px solid #F1F2F6",
              background: "#FFF",
              borderRadius: "0 0 12px 12px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Результаты
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              gap: "15px",
              p: "20px",
            }}
          >
            <Typography sx={{ fontSize: "18px", fontWeight: "500" }}>
              Заголовок
            </Typography>
            <Typography sx={{ fontSize: "18px" }}>Текст</Typography>
            <img src={homeImg} style={{ width: "40px", height: "40px" }} />
          </Box>
        </Box>
      )}
    </Box>
  );
};