import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import { cn } from '@/utils/cn'

export interface UserStatusBarProps {
  userName?: string
  avatarUrl?: string
  companyName?: string
  notificationCount?: number
  className?: string
}

export const UserStatusBar: React.FC<UserStatusBarProps> = ({
  userName = '企业用户',
  avatarUrl,
  companyName = '企业名称',
  notificationCount = 0,
  className,
}) => {
  return (
    <View className={cn(
      'flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200',
      className
    )}>
      <View className="flex items-center">
        {avatarUrl ? (
          <Image
            src={avatarUrl}
            className="w-10 h-10 rounded-full mr-3"
            mode="aspectFill"
          />
        ) : (
          <View className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
            <Text className="text-white font-bold text-lg">
              {userName.charAt(0).toUpperCase()}
            </Text>
          </View>
        )}
        <View>
          <Text className="font-semibold text-gray-900">{userName}</Text>
          <Text className="text-sm text-gray-600">{companyName}</Text>
        </View>
      </View>
      <View className="relative">
        <View className="i-heroicons-bell-20-solid w-6 h-6 text-gray-600" />
        {notificationCount > 0 && (
          <View className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
            <Text className="text-white text-xs font-bold">
              {notificationCount > 99 ? '99+' : notificationCount}
            </Text>
          </View>
        )}
      </View>
    </View>
  )
}

export default UserStatusBar