import { Text, Textarea, View } from '@tarojs/components'
import { PublishAvatar } from '@/features/publish/components/PublishPrimitives'
import type { UserProfile } from '@/types/domain'
import './index.scss'

interface PublishComposerProps {
  user: UserProfile
  value: string
  onChange: (value: string) => void
}

export function PublishComposer({ user, value, onChange }: PublishComposerProps) {
  return (
    <View className='publish-composer'>
      <View className='publish-composer__author'>
        <PublishAvatar avatarKey={user.avatarKey} avatarUrl={user.avatarUrl} size='md' label={user.nickname} />
        <View>
          <View className='publish-composer__name-row'>
            <Text className='publish-composer__name'>{user.nickname}</Text>
            <Text className='publish-composer__level'>Lv.{user.level}</Text>
          </View>
          <Text className='publish-composer__sub'>{user.handle} · {user.yearsWithPets} 年养宠</Text>
        </View>
      </View>
      <View className='publish-composer__input-wrap'>
        <Textarea
          className='publish-composer__textarea'
          value={value}
          maxlength={2000}
          autoHeight
          placeholder='说说你家毛孩子的故事吧... 使用 # 提及话题'
          placeholderClass='publish-composer__placeholder'
          onInput={event => onChange(String(event.detail.value))}
        />
      </View>
    </View>
  )
}

export default PublishComposer
