import { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

function Table(props) {
  return (
    <table className='mx-auto my-4 w-full border-collapse lg:w-1/2'>
      <thead>
        <tr>
          <th className='border border-gray-300 py-1.5'>رتبه</th>
          <th className='border border-gray-300 py-1.5'>نام مستعار</th>
          <th className='border border-gray-300 py-1.5'>امتیاز</th>
        </tr>
      </thead>
      <tbody>
        {props.rankingData.map(({ pk, nickName, rank, score }, index, rankingData) => (
          <Fragment key={rank}>
            {index > 4 && rankingData[index - 1].rank !== rank - 1 && (
              <tr className='bg-gray-50'>
                <td colSpan={3} className='border border-gray-300 py-1.5 text-center text-xl'>
                  ...
                </td>
              </tr>
            )}
            <tr className={classNames({ 'bg-green-100': props.currentStudentId === pk })}>
              <td className='border border-gray-300 py-1.5 text-center'>{rank}</td>
              <td className='ltr border border-gray-300 py-1.5 text-center'>{nickName}</td>
              <td className='border border-gray-300 py-1.5 text-center'>{score}</td>
            </tr>
          </Fragment>
        ))}
      </tbody>
    </table>
  );
}

Table.propTypes = {
  rankingData: PropTypes.array.isRequired,
  currentStudentId: PropTypes.number.isRequired
};

export default Table;
