import React from 'react';

import Wrap from '../wrap/Wrap';
import { Checkbox } from 'antd';
import { returnClass } from '../unit';

import '../g.scss';
import 'zl-color-pick/dist/zl-color-pick.css';

function LabelCheckbox(props: ICheckbox) {
  const {
    title = 'label',
    value = false,
    change,
    disabled,
    valueName,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;
  return (
    <Wrap wrapStyle={wrapStyle}>
   {valueName&& <div className={returnClass('large')}>{valueName}</div>}
      <Checkbox
        disabled={disabled}
        onChange={(e) => {
          change?.(e.target.checked);
        }}
        style={{ fontSize: 12 }}
        checked={value}
        className="label-check-box"
      >
        {title}
      </Checkbox>
    </Wrap>
  );
}

export default LabelCheckbox;

export interface ICheckbox {
  title: string;
  value: string;
  valueName: string;
  change?: Function;
  disabled?: boolean;
  wrapStyle?: React.CSSProperties;
}