import { Card, Space, Table, Typography } from "antd";
import type { Player } from "../types";
import { useMemo } from "react";

interface Props {
  index: number;
  players?: Player[];
}

export const GroupMember: React.FC<Props> = props => {
  const char = useMemo(() => {
    const baseCode = 'A'.charCodeAt(0);
    let idx = props.index;
    const times = Math.floor(idx / 26);
    const code = 'A'.repeat(times);
    const lastChar = baseCode + (idx % 26);
    return `${code}${String.fromCharCode(lastChar)}`;
  }, []);
  return (
    <Card title={`${char} 组`} style={{ minWidth: 300 }}>
      <Table
        size="small"
        rowKey={e => `${e.name}-${e.score}`}
        showHeader={false}
        pagination={false}
        dataSource={props.players}
        columns={[
          { dataIndex: '_', render: (_, __, i) => `(${i + 1})` },
          { dataIndex: 'index' },
          { dataIndex: 'name' },
          { dataIndex: 'score' },
        ]}
      />
    </Card>
  );
}