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

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

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

export const Badge = React.forwardRef<PrimitiveRefType, BadgeProps>((props, ref) => {
  return (
    <BadgePrimitive {...props} ref={ref}  styleConfig={{"base":{"badge":{"normal":{"height":"24px","border":"1px solid","borderColor":"rgba(245, 247, 249, 1)","color":"rgba(0, 0, 0, 1)","fontFamily":"Inter,sans-serif","paddingRight":"8px","borderTopLeftRadius":"9999px","borderTopRightRadius":"9999px","borderBottomRightRadius":"9999px","borderBottomLeftRadius":"9999px","fontSize":"10px","backgroundColor":"hsl(0, 0%, 100%)","paddingLeft":"8px","textTransform":"uppercase"}}},"variants":{"variant":{"blue":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(210, 100%, 50%)"}}},"green":{"badge":{"normal":{"border":"1px solid","borderColor":"rgba(0, 235, 136, 1)"}}},"red":{"badge":{"normal":{"border":"1px solid","borderColor":"rgba(188, 31, 31, 1)"}}},"yellow":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(50, 100%, 50%)"}}}}}}}/>
  );
});