import React from 'react';
import { Input as InputPrimitive, InputProps as InputPropsPrimitive } from '@modulz/primitives';

export type InputProps = InputPropsPrimitive

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

export const Input = React.forwardRef<PrimitiveRefType, InputProps>((props, ref) => {
  return (
    <InputPrimitive {...props} ref={ref}  styleConfig={{"base":{"input":{"normal":{"borderBottomLeftRadius":"4px","paddingRight":"24px","fontSize":"16px","border":"1px solid","borderColor":"rgba(102, 102, 102, 1)","height":"48px","borderBottomRightRadius":"4px","backgroundColor":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px","fontFamily":"Inter,sans-serif","borderTopRightRadius":"4px","paddingLeft":"24px","color":"rgba(0, 0, 0, 1)"}},"placeholder":{"normal":{"color":"rgba(150, 156, 166, 1)"}}},"variants":{}}}/>
  );
});