import React from 'react';
import { Checkbox as CheckboxPrimitive, CheckboxProps as CheckboxPropsPrimitive } from '@modulz/primitives';

export type CheckboxProps = CheckboxPropsPrimitive

type ExtractRefType<TypesThatMayContainReactRef> = TypesThatMayContainReactRef extends {ref?: React.Ref<infer T>} ? T : unknown;
type PrimitiveRefType = ExtractRefType<CheckboxPropsPrimitive>  

export const Checkbox = React.forwardRef<PrimitiveRefType, CheckboxProps>((props, ref) => {
  return (
    <CheckboxPrimitive {...props} ref={ref}  styleConfig={{"base":{"checkbox":{"normal":{"borderTopLeftRadius":"0px","borderBottomLeftRadius":"0px","backgroundColor":"rgba(255, 255, 255, 1)","width":"16px","border":"1px solid","borderColor":"rgba(128, 128, 128, 1)","borderBottomRightRadius":"0px","height":"16px","borderTopRightRadius":"0px"},"hover":{},"checked":{"[data-part-id=\"icon\"]":{"color":"rgba(255, 255, 255, 1)"},"backgroundColor":"rgba(3, 136, 252, 1)","border":"1px solid","borderColor":"rgba(3, 136, 252, 1)"}},"icon":{"normal":{"color":"rgba(255, 255, 255, 1)"}}},"variants":{}}}/>
  );
});