import { View, Text, Image } from '@tarojs/components'
import './index.css'

interface UserCenterCardProps {
  avatar?: string
  nickname?: string
  phone?: string
  isLoggedIn?: boolean
  isNeedGetUserInfo?: boolean
  onUserEdit?: () => void
  onGetUserInfo?: () => void
  className?: string
}

export default function TDesignUserCenterCard({
  avatar,
  nickname = '请登录',
  phone,
  isLoggedIn = false,
  isNeedGetUserInfo = false,
  onUserEdit,
  onGetUserInfo,
  className = ''
}: UserCenterCardProps) {
  const handleClick = () => {
    if (isNeedGetUserInfo && onGetUserInfo) {
      onGetUserInfo()
    } else if (onUserEdit) {
      onUserEdit()
    }
  }

  return (
    <View className={`tdesign-user-center-card ${className}`}>
      {/* 用户信息头部 */}
      <View className="tdesign-user-center-card__header" onClick={handleClick}>
        {/* 头像 */}
        {avatar ? (
          <Image
            src={avatar}
            mode="aspectFill"
            className="tdesign-user-center-card__header__avatar"
          />
        ) : (
          <View className="tdesign-user-center-card__header__avatar tdesign-user-center-card__header__avatar--default">
            <View className="i-heroicons-user-circle-20-solid w-full h-full text-gray-400" />
          </View>
        )}

        {/* 用户名 */}
        <Text className="tdesign-user-center-card__header__name">
          {nickname}
        </Text>

        {/* 需要授权用户信息的透明层 */}
        {isNeedGetUserInfo && (
          <View className="tdesign-user-center-card__header__transparent" />
        )}
      </View>
    </View>
  )
}