import PropTypes from 'prop-types';

function Table(props) {
  return (
    <table className='mx-auto my-4 w-full border-collapse lg:w-1/2'>
      <thead>
        <tr className='bg-indigo-600 text-white'>
          <th colSpan={5} className='border border-gray-400 py-2.5'>
            {`رتبه‌های برتر ${props.rankType === 'weekly' ? 'هفته' : 'ماه'} شماره ${props.number}`}
          </th>
        </tr>
        <tr className='bg-indigo-500/60'>
          <th className='border border-gray-400 py-1.5'>رتبه</th>
          <th className='border border-gray-400 py-1.5'>نام مستعار</th>
          <th className='border border-gray-400 py-1.5'>امتیاز</th>
          <th className='border border-gray-400 py-1.5'>جایزه</th>
          <th className='border border-gray-400 py-1.5'>وضعیت</th>
        </tr>
      </thead>
      <tbody>
        {props.studentScores.map(studentScore => (
          <tr key={studentScore.id} className='bg-indigo-100'>
            <td className='border border-gray-400 py-1.5 text-center'>{studentScore.rank}</td>
            <td className='ltr border border-gray-400 py-1.5 text-center'>
              {studentScore.nickName}
            </td>
            <td className='border border-gray-400 py-1.5 text-center'>{studentScore.score}</td>
            <td className='border border-gray-400 py-1.5 text-center'>
              {`${studentScore.giftAmount.toLocaleString()} ریال`}
            </td>
            <td className='border border-gray-400 py-1.5 text-center'>
              {studentScore.hasTransaction ? 'اضافه شده به کیف پول' : 'در انتظار پرداخت'}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Table.propTypes = {
  number: PropTypes.number.isRequired,
  rankType: PropTypes.string.isRequired,
  studentScores: PropTypes.array.isRequired
};

export default Table;
