import React from 'react'
import { View } from '@tarojs/components'
import { TextArea } from '@nutui/nutui-react-taro'
import './index.scss'

interface TitleTextareaProps {
  value: string
  onChange: (value: string) => void
  maxLength?: number
  placeholder?: string
  onFocus?: () => void
  onBlur?: () => void
}

const TitleTextarea: React.FC<TitleTextareaProps> = ({ 
  value='', 
  onChange, 
  maxLength = 20, 
  placeholder = '好的标题更吸引人哦',
  onFocus,
  onBlur
}) => {
  return (
    <View className='title-input-wrapper'>
      <TextArea
        className='title-input'
        placeholder={placeholder}
        value={value}
        onInput={(e) => onChange(e.detail.value)}
        maxlength={maxLength}
        autoSize={true}
        placeholderClass='title-input-placeholder'
        onFocus={onFocus}
        onBlur={onBlur}
      />
      <View className='char-count'>{value.length}/{maxLength}</View>
    </View>
  )
}

export default TitleTextarea