import { joinClassNames } from '@vizality/util/dom';
import React, { memo } from 'react';

import { Divider, Checkbox } from '..';

export default memo(({ align, color, divider, disabled, onChange, readOnly, reverse, shape, size = '24', type = 'inverted', value, children, className, ...other }) => {
  return (
    <>
      <Checkbox
        className={joinClassNames('vz-settings-checkbox-item', className)}
        align={align}
        color={color}
        disabled={disabled}
        onChange={onChange}
        readOnly={readOnly}
        reverse={reverse}
        shape={shape}
        size={size}
        type={type}
        value={value}
        {...other}
      >
        {children}
      </Checkbox>
      {divider && (
        <Divider/>
      )}
    </>
  );
});

/**
 * AVAILABLE PROPS
 *
 * align={ 'alignCenter-MrlN6q' }
 * color={ "hsl(227, calc(var(--saturation-factor, 1) * 58.4%), 65.1%)" }
 * disabled={ false }
 * onChange={ }
 * readOnly={ false }
 * reverse={ false }
 * shape={ 'box-mmYMsp' }
 * size={ 24 }
 * type={ 'inverted' }
 * value={ true }
 */


//  align: "alignCenter-MrlN6q"
//  color: "hsl(227, calc(var(--saturation-factor, 1) * 58.4%), 65.1%)"
//  disabled: false
//  displayOnly: false
//  onChange: ƒ ()
//  readOnly: false
//  reverse: false
//  shape: "box-mmYMsp"
//  size: 24
//  type: "default"
//  value: false
