import { FormControlLabel, FormGroup, Switch } from "@mui/material";
import { styled } from "@mui/material/styles";

const MaterialUISwitch = styled(Switch)(() => ({
  width: 63,
  height: 38,
  padding: 7,
  "& .MuiSwitch-switchBase": {
    margin: 1,
    padding: 0,
    transform: "translateX(6px)",
    "&.Mui-checked": {
      color: "#fff",
      transform: "translateX(24px)",
      "& .MuiSwitch-thumb:before": {
        background: "#5559CE",
        borderRadius: "50%",
      },
      "& + .MuiSwitch-track": {
        opacity: 1,
        backgroundColor: "#c7cef4",
      },
    },
  },
  "& .MuiSwitch-thumb": {
    background: "#d7d7d7",
    width: 32,
    height: 32,
    "&::before": {
      content: "''",
      position: "absolute",
      width: "100%",
      height: "100%",
      left: 0,
      top: 0,
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
      background: "#d7d7d7",
      borderRadius: "50%",
    },
  },
  "& .MuiSwitch-track": {
    opacity: 1,
    background: "transparent",
    border: "1px solid #d7d7d7",
    borderRadius: "27px",
    transform: "translateY(-2px)",
  },
}));

function SwitchTable({ value, id, changeStatus }) {
  return (
    <FormGroup className="custom-switch">
      <FormControlLabel
        control={
          <MaterialUISwitch
            sx={{ m: 1 }}
            checked={value}
            onChange={(e) => changeStatus(e.target.checked, id)}
          />
        }
      />
    </FormGroup>
  );
}

export default SwitchTable;