import type { CSSProperties } from 'react'
import { Badge, Button, Layout, Space } from '@arco-design/web-react'
import { IconDashboard, IconPlus } from '@arco-design/web-react/icon'
import { projects } from './project-data'
import type { Project } from './project-types'

const { Sider } = Layout

export function ProjectRail({ activeProject, onSelectProject }: { activeProject: Project; onSelectProject: (project: Project) => void }) {
  return (
    <Sider className="project-rail" width={96}>
      <Button className="dashboard-button" icon={<IconDashboard />} />
      <Space className="project-stack" direction="vertical" size={12}>
        {projects.map((project) => (
          <Badge key={project.id} count={project.badge} dot={false} className={project.urgent ? 'project-badge urgent' : 'project-badge'}>
            <button className={activeProject.id === project.id ? 'project-button active' : 'project-button'} onClick={() => onSelectProject(project)} style={{ '--project-color': project.color } as CSSProperties} title={project.name}>
              {project.short}
            </button>
          </Badge>
        ))}
      </Space>
      <Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" />
    </Sider>
  )
}