import React from 'react';
import { Button as ButtonPrimitive, ButtonProps as ButtonPropsPrimitive } from '@modulz/primitives';

export type ButtonProps = ButtonPropsPrimitive & {
  variant?: 'blue' | 'green' | 'red' | 'yellow';
size?: 'large';
}

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

export const Button = React.forwardRef<PrimitiveRefType, ButtonProps>((props, ref) => {
  return (
    <ButtonPrimitive {...props} ref={ref}  styleConfig={{"base":{"button":{"normal":{"borderBottomLeftRadius":"4px","paddingRight":"12px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","borderTopRightRadius":"4px","color":"hsl(0, 0%, 0%)","height":"32px","backgroundColor":"hsl(240, 10%, 90%)","borderBottomRightRadius":"4px","borderTopLeftRadius":"4px","paddingLeft":"12px"}}},"variants":{"variant":{"blue":{"button":{"normal":{"color":"hsl(0, 0%, 100%)","backgroundColor":"hsl(210, 100%, 50%)"}}},"green":{"button":{"normal":{"color":"hsl(0, 0%, 100%)","backgroundColor":"hsl(140, 60%, 50%)"}}},"red":{"button":{"normal":{"backgroundColor":"hsl(5, 100%, 60%)","color":"hsl(0, 0%, 100%)"}}},"yellow":{"button":{"normal":{"backgroundColor":"hsl(50, 100%, 50%)","color":"hsl(0, 0%, 0%)"}}}},"size":{"large":{"button":{"normal":{"height":"40px","paddingRight":"16px","fontSize":"16px","paddingLeft":"16px"}}}}}}}/>
  );
});


