import React from 'react';
import { Phases } from '../../../model/common';
import Coin from '../../common/Coin';
import Challenge from '../../icons/Challenge';
import Closure from '../../icons/Closure';
import Formation from '../../icons/Formation';
import Trivial from '../../icons/Trivial';

const PointsDesktop: React.FC = () => {
  return (
    <div className="tableWrapper desktop">
      <table>
        <thead>
          <tr>
            <th>
              <div>
                <Coin size="small" />
                <p className="title">Puntuación</p>
              </div>
            </th>
            <th>
              <div>
                <Formation />
                <p className="subtitle">{Phases.One}</p>
              </div>
            </th>
            <th>
              <div>
                <Trivial />
                <p className="subtitle">{Phases.Two}</p>
              </div>
            </th>
            <th>
              <div>
                <Challenge />
                <p className="subtitle">{Phases.Three}</p>
              </div>
            </th>
            <th>
              <div>
                <Closure />
                <p className="subtitle">{Phases.Four}</p>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p className="title">Anillo 1</p>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td />
          </tr>
          <tr className="border">
            <td>
              <p className="title">Anillo 2</p>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td />
          </tr>
          <tr className="border">
            <td>
              <p className="title">Anillo 3</p>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td />
          </tr>
          <tr className="border">
            <td>
              <p className="title">Anillo 4</p>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td />
          </tr>
          <tr className="border">
            <td>
              <p className="title">Anillo 5</p>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos grupales /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto grupal /<br /> (1 pto x participante
                  <br /> /Nº miembros
                  <br /> del equipo)
                </p>
              </div>
            </td>
            <td>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  3 pts
                  <br /> si el caso clínico
                  <br /> es ganador
                </p>
              </div>
            </td>
          </tr>
          <tr className="border">
            <td>
              <p className="title">Extras</p>
            </td>
            <td colSpan={2}>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                </div>
                <p>
                  1 pto
                  <br /> por cada especialidad
                  <br /> médica en el equipo
                </p>
              </div>
            </td>
            <td colSpan={2}>
              <div>
                <div className="coins">
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                  <Coin size="tiny" />
                </div>
                <p>
                  5 ptos
                  <br /> si todos los miembros
                  <br /> completan todo
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default PointsDesktop;