import { Box } from "@mui/material";
import {
  CallHomeFeatureIcon,
  DiagnosticsFeatureIcon,
  HelpIconFilled,
  PerformanceFeatureIcon,
} from "../../../icons";
import React from "react";

const FeatureItem = ({
  icon,
  description,
}: {
  icon: any;
  description: string;
}) => {
  return (
    <Box
      sx={{
        display: "flex",
        "& .min-icon": {
          marginRight: "10px",
          height: "23px",
          width: "23px",
          marginBottom: "10px",
        },
      }}
    >
      {icon}{" "}
      <div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
        {description}
      </div>
    </Box>
  );
};
const RegisterHelpBox = ({ hasMargin = true }: { hasMargin?: boolean }) => {
  return (
    <Box
      sx={{
        flex: 1,
        border: "1px solid #eaeaea",
        borderRadius: "2px",
        display: "flex",
        flexFlow: "column",
        padding: "20px",
        marginLeft: {
          xs: "0px",
          sm: "0px",
          md: hasMargin ? "30px" : "",
        },
        marginTop: {
          xs: "0px",
          sm: hasMargin ? "30px" : "",
        },
      }}
    >
      <Box
        sx={{
          fontSize: "16px",
          fontWeight: 600,
          display: "flex",
          alignItems: "center",
          marginBottom: "16px",

          "& .min-icon": {
            height: "21px",
            width: "21px",
            marginRight: "15px",
          },
        }}
      >
        <HelpIconFilled />
        <div>我为什么要注册?</div>
      </Box>
      <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
      向土星云订阅网络（子网）注册此群集，除了提供商业许可证和SLA支持外，还提供以下好处：
      
      </Box>

      <Box
        sx={{
          display: "flex",
          flexFlow: "column",
        }}
      >
        <FeatureItem
          icon={<CallHomeFeatureIcon />}
          description={`回拨监控`}
        />
        <FeatureItem
          icon={<DiagnosticsFeatureIcon />}
          description={`健康诊断`}
        />
        <FeatureItem
          icon={<PerformanceFeatureIcon />}
          description={`性能分析`}
        />
      </Box>
    </Box>
  );
};

export default RegisterHelpBox;
