import React from "react";
import Box from "@mui/material/Box";
import { Typography } from "@mui/material";
import SectionStyled from "./SectionStyled";
import { styled } from "@mui/material/styles";

const BoxCardBlog = styled("div")(({ theme }) => ({
  [theme.breakpoints.down("md")]: {
    width: "100%",
    maxWidth: "none",
  },
}));

function CardBlog() {
  return (
    <BoxCardBlog
      sx={{
        width: "360px",
        height: "292px",
        display: "flex",
        flexDirection: "column",
        backgroundColor: "#ffffff",
        borderRadius: "12px",
        marginBottom: "10px",
      }}
    >
      <Box
        sx={{
          width: "100%",
          height: "62%",
          backgroundColor: "#C8DADE",
          borderTopLeftRadius: "12px",
          borderTopRightRadius: "12px",
        }}
      ></Box>
      <Box
        sx={{
          padding: "16px 20px",
          maxWidth: "100%",
        }}
      >
        <Typography color={"#4D4D4D"} fontSize={"16px"}>
          01.09.2022
        </Typography>
        <Typography
          variant="h6"
          fontSize="18px"
          color={"#4D4D4D"}
          maxWidth={"300px"}
        >
          Как продвигать квиз за 10 000 ₽ в месяц
        </Typography>
      </Box>
    </BoxCardBlog>
  );
}

export default function Component() {
  return (
    <SectionStyled
      tag={"section"}
      bg={"#f2f3f7"}
      mwidth={"1160px"}
      sxsect={{
        minHeight: "596px",
      }}
      sxcont={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "10px",
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "flex-start",
          width: "100%",
          flexDirection: "column",
        }}
      >
        <Typography variant="h4" fontWeight={"500"}>
          Блог
        </Typography>
        <Box
          sx={{
            maxWidth: "361px",
          }}
        >
          <Typography sx={{ fontSize: "18px" }}>
            Кейсы, дайджесты и отборные рекомендации
          </Typography>
        </Box>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          width: "100%",
          marginTop: "40px",
        }}
      >
        <CardBlog />
        <CardBlog />
        <CardBlog />
      </Box>
    </SectionStyled>
  );
}