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

interface Props {
  text: string;
  icon: string;
  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>
  );
};