import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";

import AddImage from "@icons/questionsPage/addImage";
import AddVideofile from "@icons/questionsPage/addVideofile";
import { CropModal } from "@ui_kit/Modal/CropModal";
import { openCropModal } from "@root/cropModal";

export default function ImageAndVideoButtons() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(400));

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
      <AddImage onClick={undefined/* TODO () => openCropModal("", "") */} />
      <CropModal />
      <Typography
        sx={{
          fontWeight: 400,
          fontSize: "16px",
          lineHeight: "18.96px",
          color: theme.palette.grey2.main,
        }}
      >
        {!isMobile && "Изображение"}
      </Typography>
      <Typography> или</Typography>
      <AddVideofile />
      <Typography
        sx={{
          fontWeight: 400,
          fontSize: "16px",
          lineHeight: "18.96px",
          color: theme.palette.grey2.main,
        }}
      >
        {!isMobile && "Видео"}
      </Typography>
    </Box>
  );
}