import {Checkbox as AriaCheckbox, CheckboxProps} from 'react-aria-components';

import './Checkbox.css';

export function Checkbox({ children, ...props }: CheckboxProps) {
  return (
    (
      <AriaCheckbox {...props}>
        {({ isIndeterminate }) => (
          <>
            <div className="checkbox">
              <svg viewBox="0 0 18 18" aria-hidden="true">
                {isIndeterminate
                  ? <rect x={1} y={7.5} width={15} height={3} />
                  : <polyline points="1 9 7 14 15 4" />}
              </svg>
            </div>
            {children}
          </>
        )}
      </AriaCheckbox>
    )
  );
}

export { Checkbox as MyCheckbox };
