import { Avatar } from '@astryxdesign/core/Avatar'
import { Badge } from '@astryxdesign/core/Badge'
import { Divider } from '@astryxdesign/core/Divider'
import { HStack } from '@astryxdesign/core/HStack'
import { List, ListItem } from '@astryxdesign/core/List'
import { Text } from '@astryxdesign/core/Text'
import { Table, pixel, proportional } from '@astryxdesign/core/Table'
import type { TableColumn } from '@astryxdesign/core/Table'
import { VStack } from '@astryxdesign/core/VStack'

interface Member extends Record<string, unknown> {
  id: string
  name: string
  role: string
  projects: number
}

const MEMBERS: Member[] = [
  { id: '1', name: '林晓', role: '产品设计', projects: 4 },
  { id: '2', name: '陈默', role: '前端开发', projects: 7 },
  { id: '3', name: '周雨', role: '内容运营', projects: 3 },
]

const COLUMNS: TableColumn<Member>[] = [
  { key: 'name', header: '成员', width: proportional(1) },
  { key: 'role', header: '角色', width: proportional(1) },
  { key: 'projects', header: '进行中', width: pixel(90) },
]

export function DataDemo() {
  return (
    <VStack gap={4}>
      <List hasDividers>
        <ListItem
          label="林晓"
          description="产品设计 · 4 个项目"
          startContent={<Avatar name="林晓" size="sm" />}
          endContent={<Badge variant="blue" label="3" />}
        />
        <ListItem
          label="陈默"
          description="前端开发 · 7 个项目"
          startContent={<Avatar name="陈默" size="sm" />}
          endContent={<Badge variant="teal" label="8" />}
        />
        <ListItem
          label="周雨"
          description="内容运营 · 3 个项目"
          startContent={<Avatar name="周雨" size="sm" />}
          endContent={<Badge variant="purple" label="2" />}
        />
      </List>

      <Divider />

      <VStack gap={2}>
        <HStack gap={2} vAlign="center">
          <Text type="label">团队进度</Text>
          <Text type="supporting" size="sm">
            数据表格
          </Text>
        </HStack>
        <Table
          data={MEMBERS}
          columns={COLUMNS}
          idKey="id"
          density="compact"
        />
      </VStack>
    </VStack>
  )
}