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

interface Props {
  children?: ReactNode;
}

export default function WidgetPreviewContainer({ children }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));

  return (
    <Box
      sx={{
        width: isSmallMonitor ? "90px" : "200px",
        aspectRatio: "204 / 134",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
      }}
    >
      <svg
        viewBox="0 0 204 134"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        style={{ width: "100%" }}
      >
        {children}
      </svg>
    </Box>
  );
}
