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

export default function ProjectTile({
  image,
  title,
  year,
  children: description,
  disableGutter,
  openPhoto,
}) {
  const theme = useTheme();
  const smallMode = useMediaQuery(theme.breakpoints.down("md"));

  const imageClick = () => openPhoto(image);
  return (
    <Box
      style={{
        display: "flex",
        width: "100%",
        alignItems: "center!important",
        flexWrap: smallMode ? "wrap" : "nowrap",
        marginBottom: disableGutter ? "" : "4rem",
      }}
    >
      <div style={{ width: "100%" }}>
        <img
          src={image}
          style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }}
          onClick={imageClick}
        />
      </div>

      <Box
        style={{
          width: "100%",
          alignItems: "flex-start",
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "column",
          margin: "auto",
        }}
      >
        <div
          style={{
            display: "inline-flex",
            width: "100%",
            justifyContent: smallMode ? "center" : "",
          }}
        >
          <Typography variant="h5" component="div" style={{ fontWeight: 800 }}>
            {title}
          </Typography>
          <span
            style={{
              backgroundColor: "#f3ac20",
              color: "white",
              borderRadius: ".25rem",
              padding: 5,
              fontWeight: 500,
              margin: "auto 0 auto 10px",
            }}
          >
            {year}
          </span>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: smallMode ? "center" : "",
            width: "100%",
          }}
        >
          <Typography
            gutterBottom
            variant="subtitle1"
            component="div"
            style={{
              textAlign: smallMode ? "" : "left",
              marginTop: 10,
              width: "80%",
              maxWidth: 512,
            }}
          >
            {description}
          </Typography>
        </div>
      </Box>
    </Box>
  );
}
