/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { buildRows, getSportColumns, sortByTabs } from '../../../helpers/standings';
import styles from './standings.module.scss';

export default function Standings({ serverData }) {
  const { standings } = Object.values(serverData)[0];
  const sportName = 'football';
  const dataTable = [];
  const dataHedings = [];
  const filteredColumns = getSportColumns(sportName, 'overall');
  const filteredRows = buildRows(
    sortByTabs(standings, 'overall', sportName),
    filteredColumns,
    'overall'
  );

  dataHedings.push(filteredColumns);
  dataTable.push(filteredRows);

  return (
    <div>
      <h2>Standings</h2>
      <table className={styles.standingsTable}>
        <thead>
          <tr>
            {dataHedings[0].map((column) => (
              <th>{column.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {dataTable[0].map((row, idx) => (
            // eslint-disable-next-line react/no-array-index-key
            <tr key={idx}>{row}</tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Standings.propTypes = {
  mockData: PropTypes.shape({}),
};
