import styles from '../styles/Home.module.css';
import { TableRating } from '../components/Table/Rating';
import Grid from '@mui/material/Grid';
import { H3 } from '../components/UI/H3/H3';

function createData(
  name: string,
  attempt_1: number,
  attempt_2: number,
  attempt_3: number,
  attempt_4: number,
  attempt_all: number
) {
  return { name, attempt_1, attempt_2, attempt_3, attempt_4, attempt_all };
}

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4, 5),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 5),
  createData('Eclair', 262, 16.0, 24, 6.0, 6),
  createData('Cupcake', 305, 3.7, 67, 4.3, 7),
  createData('Gingerbread', 356, 16.0, 49, 3.9, 8),
];

export default function Slalom() {
  return (
    <div className={styles.container}>
      <div className='header'>
        <H3>Рейтинг: Робо-слалом </H3>
      </div>
      <main className={styles.main}>
        <Grid container rowSpacing={1} columnSpacing={{ xs: 12, sm: 2, md: 2 }}>
          <Grid item xs={12} sm={3} md={4}>
            <TableRating nominations={'Младшая группа'} data={rows} />
          </Grid>
          <Grid item xs={12} sm={3} md={4}>
            <TableRating nominations={'Средняя группа'} data={rows} />
          </Grid>
          <Grid item xs={12} sm={3} md={4}>
            <TableRating nominations={'Старшая группа'} data={rows} />
          </Grid>
        </Grid>
      </main>
    </div>
  )
}
