import * as React from 'react';

import { Icon } from '../Icon';
import { cx } from '../../utils/cx';

export interface CheckBoxProps {
  onClick: VoidFunction;
  checked: boolean;
  className?: string;
  disabled?: boolean;
}

export const CheckBox = ({
  onClick,
  checked,
  className = '',
  children,
  disabled,
}: React.PropsWithChildren<CheckBoxProps>): JSX.Element => {
  const handleClick = () => {
    if (disabled) {
      return;
    }

    onClick();
  };

  return (
    <div
      onClick={handleClick}
      className={cx('uc-leading-none uc-flex uc-items-start', disabled ? '' : 'uc-cursor-pointer', className)}
    >
      <span
        className={`uc-flex uc-border-2 uc-rounded-md uc-w-4 uc-h-4 uc-mr-2 uc-flex-shrink-0 uc-border-swirl ${
          disabled ? 'uc-text-swirl' : 'uc-text-primary'
        }`}
      >
        {checked && (
          <span style={{ margin: '-2px' }}>
            <Icon name="check" />
          </span>
        )}
      </span>
      <span className="uc-text-kilamanjaro">{children}</span>
    </div>
  );
};