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

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

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":{"fontWeight":"600","borderTopLeftRadius":"2px","fontSize":"14px","borderTopRightRadius":"2px","borderBottomRightRadius":"2px","paddingLeft":"16px","paddingRight":"16px","borderBottomLeftRadius":"2px","height":"32px","fontFamily":"Inter,sans-serif","color":"rgba(255, 255, 255, 1)","backgroundColor":"rgba(128, 128, 128, 1)","fontStyle":"normal"},"hover":{"backgroundColor":"rgba(19, 19, 21, 1)"}}},"variants":{"variant":{"blue":{"button":{"normal":{"backgroundColor":"rgba(3, 136, 252, 1)","color":"rgba(255, 255, 255, 1)"}}},"red":{"button":{"normal":{"color":"rgba(255, 255, 255, 1)","backgroundColor":"rgba(249, 16, 74, 1)"}}},"yellow":{"button":{"normal":{"backgroundColor":"rgba(255, 221, 0, 1)","color":"rgba(19, 19, 21, 1)"},"hover":{"color":"rgba(255, 255, 255, 1)"}}}}}}}/>
  );
});