import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';
import React, { forwardRef, useMemo } from 'react';

type RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<
  typeof RadixCheckboxGroup.Root
>;
type CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {
  size?: 'small' | 'medium' | 'large';
};

const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
  const { children, size = 'medium', ...rest } = props;

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

  return (
    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>
      {children}
    </RadixCheckboxGroup.Root>
  );
});

Root.displayName = 'CheckboxGroup.Root';

export const CheckboxGroup = {
  Root,
  Item: RadixCheckboxGroup.Item,
};
