import React, { useMemo } from 'react';
import { Checkbox } from 'antd';

function LargeScreenComponentCheckBox(props: ILargeScreenComponentCheckBox) {
  const { key, value = false, title,  styles, textStyle, change} = props;


  const Dom = useMemo(() => {
    return (
      <div
        style={{ ...styles }}
        key={key}
      >
       <span style={{...textStyle}}>{title}</span><Checkbox
        onChange={(e) =>{change?.(e.target.checked)}}
        style={{ fontSize: 12 }}
        checked={value}
        className="label-check-box"
       />
      </div>
    );
  }, [value, styles, title]);

  return Dom;
}
export default LargeScreenComponentCheckBox;

export interface ILargeScreenComponentCheckBox {
  key: string | number;
  value?: string;
  styles: React.CSSProperties;
  textStyle?: React.CSSProperties;
  title: string;
  change:  (value) => void;
}