import React from 'react';
import { Badge as BadgePrimitive, BadgeProps as BadgePropsPrimitive } from '@modulz/primitives';

export type BadgeProps = BadgePropsPrimitive & {
  variant?: 'white' | 'red' | 'yellow' | 'blue';
size?: 'large';
}

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

export const Badge = React.forwardRef<PrimitiveRefType, BadgeProps>((props, ref) => {
  return (
    <BadgePrimitive {...props} ref={ref}  styleConfig={{"base":{"badge":{"normal":{"paddingLeft":"8px","borderTopLeftRadius":"9999px","fontSize":"12px","height":"16px","borderBottomLeftRadius":"9999px","paddingRight":"8px","borderTopRightRadius":"9999px","border":"none","color":"rgba(255, 255, 255, 1)","borderBottomRightRadius":"9999px","fontWeight":"500","fontStyle":"normal","backgroundColor":"rgba(128, 128, 128, 1)","fontFamily":"Inter,sans-serif","textTransform":"none"}}},"variants":{"variant":{"white":{"badge":{"normal":{"color":"rgba(19, 19, 21, 1)","backgroundColor":"rgba(255, 255, 255, 1)"}}},"red":{"badge":{"normal":{"backgroundColor":"rgba(249, 16, 74, 1)","color":"rgba(255, 255, 255, 1)"}}},"yellow":{"badge":{"normal":{"backgroundColor":"rgba(255, 221, 0, 1)","color":"rgba(19, 19, 21, 1)"}}},"blue":{"badge":{"normal":{"backgroundColor":"rgba(3, 136, 252, 1)"}}}},"size":{"large":{"badge":{"normal":{"fontSize":"14px","paddingRight":"16px","height":"32px","paddingLeft":"16px"}}}}}}}/>
  );
});