import {
  Badge as RadixBadge,
  type BadgeProps as RadixBadgeProps,
} from '@radix-ui/themes';
import { useMemo, forwardRef } from 'react';

export type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {
  size?: 'small' | 'medium' | 'large';
  color?: 'error' | 'accent' | 'neutral' | 'success';
};

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  (props: BadgeProps, ref): React.ReactNode => {
    const { size = 'small', color = 'accent', ...rest } = props;

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

    const radixColor = useMemo(() => {
      switch (color) {
        case 'error':
          return 'red';
        case 'neutral':
          return 'gray';
        case 'success':
          return 'green';
        case 'accent':
        default:
          return undefined;
      }
    }, [color]);

    return (
      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />
    );
  }
);

Badge.displayName = 'Badge';
