import React from 'react';
import { Text as TextPrimitive, TextProps as TextPropsPrimitive } from '@modulz/primitives';

export type TextProps = TextPropsPrimitive & {
  size?: '1' | 1 | '2' | 2 | '3' | 3 | '4' | 4;
}

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

export const Text = React.forwardRef<PrimitiveRefType, TextProps>((props, ref) => {
  return (
    <TextPrimitive {...props} ref={ref}  styleConfig={{"base":{"text":{"normal":{"textTransform":"none","fontWeight":"400","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","textDecoration":"none","lineHeight":"16px","fontSize":"inherit","fontStyle":"normal"}}},"variants":{"size":{"1":{"text":{"normal":{"fontSize":"11px","lineHeight":"16px"}}},"2":{"text":{"normal":{"fontSize":"14px","lineHeight":"20px"}}},"3":{"text":{"normal":{"fontSize":"24px","lineHeight":"32px"}}},"4":{"text":{"normal":{"fontSize":"32px","lineHeight":"36px"}}}}}}}/>
  );
});