import Switch from "@mui/material/Switch";
import { dynamicWidthStyle } from "@/page/App/components/InspectPanel/PanelSetters/style";
import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
import { BaseSwitchProps } from "./interface";
import { setterContainerStyle } from "./style";
 
const BaseSwitchSetter = (props: BaseSwitchProps) => {
  const { value, attrName, handleUpdateDsl, labelDesc, labelName, labelSize } =
    props;

  return (
    <div css={setterContainerStyle(false)} key={`${attrName}-wrapper`}>
      {labelName && (
        <span>
          <PanelLabel
            labelName={labelName}
            labelDesc={labelDesc}
            labelSize={labelSize}
          />
        </span>
      )}
      <div css={dynamicWidthStyle}  key={`${attrName}-div`}>
        <Switch
          key={attrName}
          name={attrName}
          onChange={(event) => {
            handleUpdateDsl(attrName, event.target.checked);
          }}
          checked={value}
        />
      </div>
    </div>
  );
};

BaseSwitchSetter.displayName = "BaseSwitchSetter";

export default BaseSwitchSetter;
