import type React from "react";
import type { Player } from "../types";
import { Avatar, Table } from "antd";
import User from "./User";

interface Props {
  loading?: boolean;
  players?: Player[];
}

export const PlayerList: React.FC<Props> = props => {
  return (
    <>
      <Table
        dataSource={props.players}
        rowKey={(e) => `${e.name}-${e.uid}`}
        loading={props.loading}
      >
        <Table.Column width={32} dataIndex={'_'} align="center" render={(_, __, i) => `${i + 1}`} />
        <Table.Column width={32} dataIndex={'avatar'} align="center" render={src => <Avatar src={src} />} />
        <Table.Column
          width={200}
          title="姓名"
          align="center"
          dataIndex={'name'} 
          render={(name, { uid }) => <User name={name} uid={uid} />}
        />
        <Table.Column width={200} dataIndex={'score'} title="积分" sorter={{
          compare: ({ score: a }: Player, { score: b}: Player) => a - b,
        }} />
      </Table>
    </>
  );
}