/**
 * KRA - Dashboard Update Table Component
 * 与GVA table.vue 逻辑一致 - 最新更新表格
 */
import React from 'react';
import { Card, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface UpdateItem {
  ranking: number;
  title: string;
  click_num: number;
  hot: number;
}

const tableData: UpdateItem[] = [
  {
    ranking: 1,
    title: '更简洁的使用界面，更快速的操作体验',
    click_num: 523,
    hot: 263
  },
  {
    ranking: 2,
    title: '更优质的服务，更便捷的使用体验',
    click_num: 416,
    hot: 223
  },
  {
    ranking: 3,
    title: '更快速的创意实现，更高效的工作效率',
    click_num: 337,
    hot: 176
  },
  {
    ranking: 4,
    title: '更多的创意资源，更多的创意灵感',
    click_num: 292,
    hot: 145
  },
  {
    ranking: 5,
    title: '更合理的代码结构，更清晰的代码逻辑',
    click_num: 173,
    hot: 110
  }
];

const columns: ColumnsType<UpdateItem> = [
  {
    title: '排名',
    dataIndex: 'ranking',
    width: 80,
    align: 'center',
  },
  {
    title: '内容标题',
    dataIndex: 'title',
    ellipsis: true,
  },
  {
    title: '关注度',
    dataIndex: 'click_num',
    width: 100,
  },
  {
    title: '热度值',
    dataIndex: 'hot',
    width: 100,
  },
];

const UpdateTable: React.FC = () => {
  return (
    <Card title="最新更新" className="kra-dashboard-card" variant="borderless">
      <Table
        columns={columns}
        dataSource={tableData}
        rowKey="ranking"
        pagination={false}
        size="small"
      />
    </Card>
  );
};

export default UpdateTable;
