import {Box, FormControlLabel, IconButton, Typography} from "@mui/material";
import { useState } from "react";
import CustomizedSwitch from "@ui_kit/CustomSwitch";
import * as React from "react";

interface Props {
  text: string;
  icon: any;
  onClick?: () => void
}

export const SwitchSetting = ({ text, icon, onClick }: Props) => {
  // const [active, setActive] = useState<boolean>(false);
  return (
    <Box
      sx={{
        p: "14px",
        mb: "14px",
        display: "flex",
        justifyContent: "space-between",
        border: "1px solid #9A9AAF",
        borderRadius: "8px",
        alignItems: "center",
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "left", maxWidth: "756px", width: "100%" }}>
        <img src={icon} alt="icon" />
        {/*<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>*/}
          <FormControlLabel
              value="start"
              control={<CustomizedSwitch/>}
              label={text}
              labelPlacement="start"
              sx={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  color: "#9A9AAF",
                  width: "100%",
                  paddingRight: "15px"
              }}
              onClick={onClick}

          />
      </Box>



      {/*<IconButton disableRipple onClick={() => setActive(!active)}>*/}
      {/*  <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*    <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />*/}
      {/*    <rect*/}
      {/*      x={active ? "23" : "1"}*/}
      {/*      y="1"*/}
      {/*      width="28"*/}
      {/*      height="28"*/}
      {/*      rx="14"*/}
      {/*      fill="white"*/}
      {/*      stroke={active ? "#7E2AEA" : "#9A9AAF"}*/}
      {/*      strokeWidth="2"*/}
      {/*    />*/}
      {/*  </svg>*/}
      {/*</IconButton>*/}
    </Box>
  );
};