import React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';


type Props = {
    nominations: string;
    data: {
        name: string,
        attempt_1: number,
        attempt_2: number,
        attempt_3: number,
        attempt_4: number,
        attempt_all: number
    }[];
  }

export const TableRating: React.FC<Props> = ({nominations,data}) => {
    return(
        <TableContainer component={Paper}> 
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell align="center" colSpan={6}>
                    {nominations}
                  </TableCell>
                </TableRow>
              </TableHead>
            <TableHead >
            <TableRow >
                <TableCell rowSpan={2}>№</TableCell>
                <TableCell rowSpan={2}>Команды</TableCell>
                <TableCell colSpan={2} align="center">Раунд I</TableCell>
                <TableCell colSpan={2} align="center">Раунд II</TableCell>
                <TableCell rowSpan={2} align="center">Всего</TableCell>
              </TableRow>
              <TableRow >
                <TableCell align="center">Попытка 1</TableCell>
                <TableCell align="center">Попытка 2</TableCell>
                <TableCell align="center">Попытка 1</TableCell>
                <TableCell align="center">Попытка 2</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((row, key) => (
                <TableRow key={row.name}>
                    <TableCell align="center">{key+1}</TableCell>
                    <TableCell component="th" scope="row"> {row.name}</TableCell>
                    <TableCell align="center">{row.attempt_1}</TableCell>
                    <TableCell align="center">{row.attempt_2}</TableCell>
                    <TableCell align="center">{row.attempt_3}</TableCell>
                    <TableCell align="center">{row.attempt_4}</TableCell>
                    <TableCell align="center">{row.attempt_all}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
    )
}