import React from 'react';
import { Textarea as TextareaPrimitive, TextareaProps as TextareaPropsPrimitive } from '@modulz/primitives';

export type TextareaProps = TextareaPropsPrimitive & {
  variant?: 'ghost';
size?: 'large';
}

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

export const Textarea = React.forwardRef<PrimitiveRefType, TextareaProps>((props, ref) => {
  return (
    <TextareaPrimitive {...props} ref={ref}  styleConfig={{"base":{"textarea":{"normal":{"borderBottomLeftRadius":"2px","fontSize":"14px","color":"rgba(19, 19, 21, 1)","paddingLeft":"8px","minHeight":"96px","borderTopLeftRadius":"2px","backgroundColor":"rgba(255, 255, 255, 1)","paddingBottom":"4px","paddingTop":"4px","borderTopRightRadius":"2px","borderBottomRightRadius":"2px","border":"1px solid","borderColor":"rgba(128, 128, 128, 1)","fontFamily":"Inter,sans-serif","paddingRight":"8px","lineHeight":"21px"}},"placeholder":{"normal":{"color":"rgba(128, 128, 128, 1)"}}},"variants":{"variant":{"ghost":{"textarea":{"normal":{"backgroundColor":"transparent","border":"none"}}}},"size":{"large":{"textarea":{"normal":{"paddingTop":"16px","paddingBottom":"16px","height":"16px","fontSize":"20px","paddingRight":"16px","paddingLeft":"16px"}}}}}}}/>
  );
});