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

import AddImage from "@icons/questionsPage/addImage";
import AddVideofile from "@icons/questionsPage/addVideofile";

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} />
      <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>
  );
}