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

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

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

export const Button = React.forwardRef<PrimitiveRefType, ButtonProps>((props, ref) => {
  return (
    <ButtonPrimitive {...props} ref={ref}  styleConfig={{"base":{"button":{"normal":{"paddingRight":"40px","transform":"none","borderTopRightRadius":"4px","borderBottomLeftRadius":"4px","fontFamily":"Inter,sans-serif","fontStyle":"normal","boxShadow":"none","backgroundColor":"rgba(0, 0, 0, 1)","borderBottomRightRadius":"4px","fontSize":"16px","color":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px","fontWeight":"600","height":"48px","paddingLeft":"40px"},"hover":{"backgroundColor":"rgba(40, 42, 46, 1)"},"active":{"backgroundColor":"rgba(12, 13, 14, 1)"},"focus":{"boxShadow":"0px 0px 0px 2px hsla(0, 0%, 0%, 0.3)"}}},"variants":{"variant":{"primary":{"button":{"normal":{"paddingLeft":"40px","backgroundColor":"rgba(0, 235, 136, 1)","height":"48px","paddingRight":"40px","color":"rgba(12, 13, 14, 1)"},"hover":{"backgroundColor":"rgba(0, 250, 145, 1)"},"active":{"backgroundColor":"rgba(0, 250, 145, 1)"},"focus":{"boxShadow":"0px 0px 0px 2px rgba(0, 204, 118, 1)"},"disabled":{"opacity":"70%"}}},"secondary":{"button":{"normal":{"height":"48px","color":"rgba(12, 13, 14, 1)","paddingRight":"40px","backgroundColor":"rgba(12, 13, 14, 0)","paddingLeft":"40px","boxShadow":"inset 0px 0px 0px 1px rgba(12, 13, 14, 1)"},"hover":{"boxShadow":"none","backgroundColor":"rgba(226, 229, 233, 1)"},"active":{"backgroundColor":"rgba(226, 229, 233, 1)","boxShadow":"none"}}}}}}}/>
  );
});