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

interface Props {
  onClick?: () => void;
  image: ReactNode;
  text1: string;
  text2: string;
}

export default function WidgetTypeButton({
  onClick,
  image,
  text1,
  text2,
}: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));

  return (
    <Button
      onClick={onClick}
      sx={{
        display: "flex",
        flexDirection: isSmallMonitor ? "row" : "column",
        alignItems: "start",
        justifyContent: "start",
        width: isSmallMonitor ? undefined : "min-content",
        borderRadius: "8px",
        columnGap: "18px",
      }}
    >
      {image}
      <Box
        sx={{
          mt: isSmallMonitor ? undefined : "20px",
          display: "flex",
          flexDirection: "column",
          alignItems: "start",
        }}
      >
        <Typography>{text1}</Typography>
        <Typography
          sx={{
            mt: isSmallMonitor ? "10px" : "15px",
            fontSize: "16px",
            color: (theme) => theme.palette.grey2.main,
            textAlign: "start",
          }}
        >
          {text2}
        </Typography>
      </Box>
    </Button>
  );
}
