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