import React from 'react';
import { RingProps } from '../../../model/components/ring';
import RoundedLink from '../../common/RoundedLink';
import EventIcon from '../../icons/Event';
import PhaseHeader from './PhaseHeader';

const Event: React.FC<RingProps> = ({ ring }) => {
  const {
    closure: { video },
  } = ring;

  return (
    <section className="challenge event">
      <PhaseHeader ring={ring} icon={<EventIcon />} phase="Evento" />
      <form>
        <fieldset>
          <div className="questionsWrapper">
            <div className="questionsPosition">
              <div className="questionItem">
                <div className="questionItemWrapper">
                  <div className="content left">
                    <div className="contentWrapper">
                      <h2>Evento de clausura online</h2>
                    </div>
                    <div className="imageWrapper">
                      <img
                        alt="Evento de clausura online"
                        src="/img/event.jpeg"
                      />
                    </div>
                  </div>
                  <div className="content right">
                    <p>
                      Accede a la <strong>gala online</strong> en que
                      conoceremos al equipo
                      <strong>
                        ganador y los tres finalistas del caso clínico.
                      </strong>{' '}
                      Y como colofón, finalmente anunciaremos que equipo ha
                      logrado más puntos, y por tanto, el que será{' '}
                      <strong>ganador de los Dialimpic Games.</strong>
                    </p>
                    <p>
                      ¿Será tu equipo el que logre ascender al podio de los
                      Dialimpic Games?
                    </p>
                    <p>
                      <strong>
                        ¡Te invitamos a descubrirlo el XX de Octubre a las
                        18:00!
                      </strong>
                    </p>
                    <RoundedLink title="Unirme" route={video} isExternal />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  );
};

export default Event;