import { Input, Dropdown, Avatar } from 'antd'
import { SearchOutlined, BellOutlined, LogoutOutlined } from '@ant-design/icons'
import useAuthStore from '../../stores/authStore'
import './TopBar.css'

function TopBar() {
  const { user, logout } = useAuthStore()

  const items = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出',
      onClick: () => logout(),
    },
  ]

  const displayName = user?.display_name || user?.username || '未知用户'
  const initials = displayName.slice(0, 1).toUpperCase()

  return (
    <div className="top-bar">
      <div className="top-bar-search">
        <Input placeholder="搜索..." prefix={<SearchOutlined />} />
      </div>
      <div className="top-bar-actions">
        <BellOutlined className="top-bar-icon" />
        <Dropdown menu={{ items }} placement="bottomRight">
          <Avatar className="top-bar-avatar" style={{ backgroundColor: 'var(--color-primary-green)' }}>
            {initials}
          </Avatar>
        </Dropdown>
      </div>
    </div>
  )
}

export default TopBar