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

export type InputProps = InputPropsPrimitive & {
  variant?: 'ghost';
size?: 'large';
}

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

export const Input = React.forwardRef<PrimitiveRefType, InputProps>((props, ref) => {
  return (
    <InputPrimitive {...props} ref={ref}  styleConfig={{"base":{"input":{"normal":{"paddingRight":"12px","borderBottomLeftRadius":"4px","borderTopRightRadius":"4px","border":"1px solid","borderColor":"hsl(240, 10%, 90%)","color":"hsl(0, 0%, 0%)","backgroundColor":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","height":"32px","borderBottomRightRadius":"4px","paddingLeft":"12px"}},"placeholder":{"normal":{"color":"hsl(240, 5%, 85%)"}}},"variants":{"variant":{"ghost":{"input":{"normal":{"border":"1px solid","borderColor":"transparent","backgroundColor":"transparent"}}}},"size":{"large":{"input":{"normal":{"fontSize":"16px","paddingLeft":"16px","height":"40px","paddingRight":"16px"}}}}}}}/>
  );
});


