import React from 'react';
import { calculateScore } from '../../../utils/extraPoints';
import { RankingProps } from '../../../model/components/ranking';

const Ranking: React.FC<RankingProps> = ({ teams, myTeam }) => {
  const myTeamPosition = teams.findIndex((team) => team.id === myTeam.id);

  return (
    <div className="rankingList">
      <h1>Ranking</h1>
      <ul>
        {teams.slice(0, 10).map((team, index) => (
          <li className={`listItem${index <= 2 ? ' top' : ''}`} key={team.id}>
            <p className="position">{`${index + 1}.`}</p>
            <div className="team">
              <p className="name">{team.name}</p>
              <p className="points">{`${calculateScore(
                team.totalScore,
                team.extraPoints,
              ).toFixed(2)} pts`}</p>
            </div>
          </li>
        ))}
        <li className="listItem mine">
          <div className="divider" />
          <div className="content">
            <p className="position">{`${myTeamPosition + 1}.`}</p>
            <div className="team">
              <p className="name">{myTeam.name}</p>
              <p className="points">{`${calculateScore(
                myTeam.totalScore,
                myTeam.extraPoints,
              ).toFixed(2)} pts`}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  );
};

export default Ranking;