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 : unknown;
type PrimitiveRefType = ExtractRefType<BadgePropsPrimitive>  

export const Badge = React.forwardRef<PrimitiveRefType, BadgeProps>((props, ref) => {
  return (
    <BadgePrimitive {...props} ref={ref}  styleConfig={{"base":{"badge":{"normal":{"height":"24px","borderBottomRightRadius":"9999px","paddingLeft":"8px","paddingRight":"8px","borderBottomLeftRadius":"9999px","borderTopRightRadius":"9999px","border":"1px solid","borderColor":"hsl(240, 10%, 90%)","color":"hsl(0, 0%, 0%)","backgroundColor":"hsl(0, 0%, 100%)","textTransform":"uppercase","borderTopLeftRadius":"9999px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"11px"}}},"variants":{"variant":{"blue":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(210, 100%, 50%)"}}},"green":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(140, 60%, 50%)"}}},"red":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(5, 100%, 60%)"}}},"yellow":{"badge":{"normal":{"border":"1px solid","borderColor":"hsl(50, 100%, 50%)"}}}}}}}/>
  );
});


