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":{"fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","paddingTop":"8px","fontSize":"14px","lineHeight":"32px","borderBottomRightRadius":"4px","paddingLeft":"8px","minHeight":"96px","paddingBottom":"8px","borderBottomLeftRadius":"4px","paddingRight":"8px","borderTopRightRadius":"4px","color":"hsl(0, 0%, 0%)","border":"1px solid","borderColor":"hsl(240, 10%, 90%)","fontStyle":"italic","backgroundColor":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px","fontWeight":"700"}},"placeholder":{"normal":{"color":"hsl(240, 5%, 85%)"}}},"variants":{"variant":{"ghost":{"textarea":{"normal":{"filter":" blur(5px)","border":"none","boxShadow":"0px 1px 3px 0px rgba(0, 0, 0, 0.2)","backgroundColor":"transparent","textTransform":"uppercase","transition":"opacity 500ms ease-in-out 0ms","transform":"none"}}}},"size":{"large":{"textarea":{"normal":{"paddingRight":"16px","borderBottomLeftRadius":"8px","paddingTop":"16px","borderTopRightRadius":"8px","fontSize":"16px","color":"rgba(105, 237, 36, 0.74)","height":"40px","borderBottomRightRadius":"8px","borderTopLeftRadius":"8px","paddingLeft":"16px","paddingBottom":"16px"}}}}}}}/>
  );
});


