import { Badge, Button, Input, Layout, Space, Typography } from '@arco-design/web-react'
import { IconApps, IconArrowLeft, IconArrowRight, IconMoon, IconNotification, IconQuestionCircle, IconSearch, IconSun } from '@arco-design/web-react/icon'
import type { Theme } from './project-types'

const { Header } = Layout
const { Text } = Typography

export function ProjectTopbar({ theme, onToggleTheme }: { theme: Theme; onToggleTheme: () => void }) {
  return (
    <Header className="topbar">
      <div className="brand-lockup">
        <span className="brand-symbol">S</span>
        <Text className="brand-name">SenlinAI</Text>
      </div>
      <div className="global-search" role="search">
        <Input size="large" prefix={<IconSearch />} placeholder="搜索项目、频道、文档、任务、联系人..." />
        <Button size="large" type="primary">搜索</Button>
      </div>
      <Space className="topbar-actions">
        <Button aria-label={theme === 'dark' ? '切换浅色模式' : '切换深色模式'} icon={theme === 'dark' ? <IconSun /> : <IconMoon />} onClick={onToggleTheme} />
        <Button icon={<IconArrowLeft />} disabled />
        <Button icon={<IconArrowRight />} disabled />
        <Badge count={8} dot><Button icon={<IconNotification />} /></Badge>
        <Button icon={<IconQuestionCircle />} />
        <Button icon={<IconApps />} />
      </Space>
    </Header>
  )
}