import {
  Checkbox as RadixCheckbox,
  type CheckboxProps as RadixCheckboxProps,
} from '@radix-ui/themes';
import { useMemo, forwardRef } from 'react';

export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
  size?: 'small' | 'medium' | 'large';
};

export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
  (props, ref): React.ReactNode => {
    const { size = 'medium', ...rest } = props;

    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {
      switch (size) {
        case 'small':
          return '1';
        case 'medium':
          return '2';
        case 'large':
          return '3';
      }
    }, [size]);

    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;
  }
);

Checkbox.displayName = 'Checkbox';
