import { Button, Card, Space, Typography } from '@arco-design/web-react'
import { IconPlus, IconSearch } from '@arco-design/web-react/icon'
import { ProjectFileGrid } from './project-file-grid'
import type { ProjectWorkspace } from './project-types'

const { Title, Text } = Typography

export function ProjectNotes({ activeWorkspace, onSelectItem, onUploadSource }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void; onUploadSource: () => void }) {
  const { notes, project } = activeWorkspace

  return (
    <div className="project-channel-page project-notes-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>笔记资料</Title>
          <Text type="secondary">{project.name} 的在线文件管理页，集中管理笔记、资料和附件。</Text>
        </div>
        <Space>
          <Button icon={<IconSearch />}>搜索资料</Button>
          <Button type="primary" icon={<IconPlus />} onClick={onUploadSource}>上传/新建</Button>
        </Space>
      </div>

      <Card className="queue-section" bordered>
        <div className="section-header">
          <Title heading={6}>最近更新</Title>
          <Button type="text" size="mini">按更新时间排序</Button>
        </div>
        <ProjectFileGrid items={notes} onSelectItem={onSelectItem} />
      </Card>
    </div>
  )
}
