import React from 'react'
import { BsChatDots, BsPeople, BsGrid3X3Gap, BsGear } from 'react-icons/bs'
import { getDefaultAvatar } from '../utils/avatarUtils'

interface NavigationProps {
  activeTab: 'chat' | 'contact' | 'browser'
  onTabChange: (tab: 'chat' | 'contact' | 'browser') => void
  onSettingsClick: () => void
  currentUserId: number | null
  currentUserName: string
  totalUnread: number
}

export const Navigation: React.FC<NavigationProps> = ({
  activeTab,
  onTabChange,
  onSettingsClick,
  currentUserId,
  currentUserName,
  totalUnread
}) => {
  const getNavAvatar = (): React.ReactNode => {
    return getDefaultAvatar(currentUserId || 0, currentUserName, { sizePx: 36 })
  }

  return (
    <div className="main-nav">
      <div className="nav-avatar">
        {getNavAvatar()}
      </div>
      
      <div 
        className={`nav-icon ${activeTab === 'chat' ? 'active' : ''}`} 
        onClick={() => onTabChange('chat')}
        title="聊天"
      >
        <BsChatDots size={22} />
        {totalUnread > 0 && <span className="badge">{totalUnread}</span>}
      </div>

      <div 
        className={`nav-icon ${activeTab === 'contact' ? 'active' : ''}`} 
        onClick={() => onTabChange('contact')}
        title="通讯录"
      >
        <BsPeople size={24} />
      </div>

      <div 
        className={`nav-icon ${activeTab === 'browser' ? 'active' : ''}`} 
        onClick={() => onTabChange('browser')}
        title="应用中心"
      >
        <BsGrid3X3Gap size={22} />
      </div>

      <div className="nav-bottom">
        <div className="nav-icon" title="设置" onClick={onSettingsClick}>
          <BsGear size={22} />
        </div>
      </div>
    </div>
  )
}
