import React from "react";
import classNames from "classnames";
import { Checkbox, Icon, Switch } from "easy-design";
import styles from "./index.less";

export default function EasyBoolean(props) {
  const {
    value,
    mode = "normal",
    icon,
    children,
    onChange,
    size = "small",
    disabled = false,
  } = props;

  const handleChange = (e) => {
    onChange(e.target.checked);
  };

  return mode === "icon" ? (
    <span
      className={classNames(styles.icon, { [styles.active]: value })}
      onClick={(e) => onChange(!value)}
    >
      <Icon type={icon} />
    </span>
  ) : mode === "switch" ? (
    <Switch size={size} checked={value} onChange={onChange} disabled={disabled}>
      {children}
    </Switch>
  ) : (
    <Checkbox checked={value} onChange={handleChange} disabled={disabled}>
      {children}
    </Checkbox>
  );
}