import React, { CSSProperties } from 'react';
import './Checkbox.scss';
import classNames from 'classnames';

export interface Props {
  /**
   * Optional side label
   */
  label?: string;
  /**
   * Optional disable attribute
   */
  disabled?: boolean;
  /**
   *Optional checked attribute to prefill
   */
  checked?: boolean;
  /**
   * Value as a prop if any
   */
  value?: string;
  /**
   * Optional onChange function
   */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;

  style?: CSSProperties;
  /**
   * for partial checked checkbox
   */
  partial?: boolean;
}

const Checkbox = (props: Props) => {
  return (
    <div className={`storybook-checkbox--container`}>
      <label className="storybook-checkbox--overlay">
        <input
          type="checkbox"
          name="checkbox"
          className={classNames(`storybook-checkbox--check `, {
            'storybook-checkbox--partial': props?.partial,
          })}
          {...props}
        />
      </label>
      {props.label && (
        <label className="storybook-checkbox--text-container">
          {props.label}
        </label>
      )}
    </div>
  );
};

export default Checkbox;