import {Box, FormControlLabel} from "@mui/material";
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) => {
  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" />
          <FormControlLabel
              value="start"
              control={<CustomizedSwitch/>}
              label={text}
              labelPlacement="start"
              sx={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  color: "#9A9AAF",
                  width: "100%",
                  paddingRight: "15px"
              }}
              onClick={onClick}
          />
      </Box>
    </Box>
  );
};