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