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

const BoxServies = styled('div')(({ theme }) => ({
    [theme.breakpoints.down('md')]: {
        textAlign: 'center',
        width: '100%',
    },
}));

const buttonTemplates = ['Услуги', 'Развлечения', 'Строительство и ремонт', 'E-commerce']

function Servises () {
    return (
        <BoxServies
            sx={{
                width: '360px',
                height: '262px',
                backgroundColor: '#ffffff',
                borderRadius: '12px',
                marginBottom: '10px',
            }}
        >
            <Box
                sx={{
                    width: '360',
                    height: '180px',
                    backgroundColor: '#c8dade',
                    borderRadius: '12px 12px 0 0',
                }}
            > </Box>
            <Box padding={'20px 54px 20px 20px'}>
                <Typography fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>Вдохновляющие фото и видео для свадьбы</Typography>
            </Box>
        </BoxServies>
    )
}

export default function Component () {
    const [select, setSelect] = React.useState(0)
    return (
        <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
                       sxsect={{height: '630px'}}
                       sxcont={{
                           display: 'flex',
                           flexDirection: 'column',
                           padding: '50px 10px 60px 10px',
                           gap: "30px"
                       }}
        >
            <Box
                sx={{
                    minHeight: '109px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                }}
            >
                <Typography variant='h6' fontSize={'36px'} lineHeight={'42.66px'} fontWeight={'500'}>Начните с готового шаблона</Typography>
                <Typography maxWidth={'354px'} fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>73 готовых шаблонов разных ниш, постоянно пополняем</Typography>
            </Box>
            <Box
                sx={{
                    width: '53%',
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',

                }}
            >
                {buttonTemplates.map( (element, index) => (
                    <Button key={index}
                            // to={element[0]}
                            onClick={() => {
                                setSelect(index)
                            }}
                            variant="text"
                            sx={{
                                fontSize: "16px",
                                fontWeight: 500,
                                textDecoration: select === index ? "underline" : "none",
                                textUnderlineOffset: select === index ? "7px" : "",
                                color: select === index ? '#7E2AEA' : 'black',
                                textTransform: 'none',
                            }}>{element} </Button>
                ))}
            </Box>
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                }}
            >
                <Servises/>
                <Servises/>
                <Servises/>
            </Box>
        </SectionStyled>
    )
}