text: import React from "react";
  import { Grid, Typography } from "@mui/material";
  import CodeIcon from "@mui/icons-material/Code";
  import BuildIcon from "@mui/icons-material/Build";
  import ComputerIcon from "@mui/icons-material/Computer";
  import BarChartIcon from "@mui/icons-material/BarChart";
  import HeadsetMicIcon from "@mui/icons-material/HeadsetMic";
  import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
  import CloudIcon from "@mui/icons-material/Cloud";
  import MeassageIcon from "@mui/icons-material/Message";
  import CancelIcon from "@mui/icons-material/Cancel";
  import calculateSpacing from "./calculateSpacing";
  import useMediaQuery from "@mui/material/useMediaQuery";
  import { withTheme } from "@mui/styles";
  import FeatureCard from "./FeatureCard";
  import useWidth from "../../../shared/functions/useWidth";
  
  const iconSize = 30;
  
  const features = [
    {
      color: "#00C853",
      headline: "Feature 1",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <BuildIcon style={{ fontSize: iconSize }} />,
      mdDelay: "0",
      smDelay: "0",
    },
    {
      color: "#6200EA",
      headline: "Feature 2",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <CalendarTodayIcon style={{ fontSize: iconSize }} />,
      mdDelay: "200",
      smDelay: "200",
    },
    {
      color: "#0091EA",
      headline: "Feature 3",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <MeassageIcon style={{ fontSize: iconSize }} />,
      mdDelay: "400",
      smDelay: "0",
    },
    {
      color: "#d50000",
      headline: "Feature 4",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <ComputerIcon style={{ fontSize: iconSize }} />,
      mdDelay: "0",
      smDelay: "200",
    },
    {
      color: "#DD2C00",
      headline: "Feature 5",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <BarChartIcon style={{ fontSize: iconSize }} />,
      mdDelay: "200",
      smDelay: "0",
    },
    {
      color: "#64DD17",
      headline: "Feature 6",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <HeadsetMicIcon style={{ fontSize: iconSize }} />,
      mdDelay: "400",
      smDelay: "200",
    },
    {
      color: "#304FFE",
      headline: "Feature 7",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <CloudIcon style={{ fontSize: iconSize }} />,
      mdDelay: "0",
      smDelay: "0",
    },
    {
      color: "#C51162",
      headline: "Feature 8",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <CodeIcon style={{ fontSize: iconSize }} />,
      mdDelay: "200",
      smDelay: "200",
    },
    {
      color: "#00B8D4",
      headline: "Feature 9",
      text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.",
      icon: <CancelIcon style={{ fontSize: iconSize }} />,
      mdDelay: "400",
      smDelay: "0",
    },
  ];
  
  function FeatureSection(props) {
    const { theme } = props;
    const width = useWidth();
    const isWidthUpMd = useMediaQuery(theme.breakpoints.up("md"));
  
    return (
      <div style={{ backgroundColor: "#FFFFFF" }}>
        <div className="container-fluid lg-p-top">
          <Typography variant="h3" align="center" className="lg-mg-bottom">
            Features
          </Typography>
          <div className="container-fluid">
            <Grid container spacing={calculateSpacing(width, theme)}>
              {features.map((element) => (
                <Grid
                  item
                  xs={6}
                  md={4}
                  data-aos="zoom-in-up"
                  data-aos-delay={isWidthUpMd ? element.mdDelay : element.smDelay}
                  key={element.headline}
                >
                  <FeatureCard
                    Icon={element.icon}
                    color={element.color}
                    headline={element.headline}
                    text={element.text}
                  />
                </Grid>
              ))}
            </Grid>
          </div>
        </div>
      </div>
    );
  }
  
  FeatureSection.propTypes = {};
  
  export default withTheme(FeatureSection);
  