import React from 'react';
import Help from '../icons/Help';
import HeaderLink from '../layout/HeaderLink';
import LogoNordisk from './LogoNordisk';

const Illustration: React.FC = () => {
  return (
    <div className="illustration">
      <img
        className="cloud one"
        alt="Cloud"
        src="/img/illustration/cloud-one.svg"
      />
      <img
        className="cloud two"
        alt="Cloud"
        src="/img/illustration/cloud-two.svg"
      />
      <div className="bottom">
        <footer>
          <HeaderLink
            className=" helpLink"
            title="Ayuda"
            route="/help"
            icon={<Help size="medium" />}
          />
          <LogoNordisk white />
        </footer>
        <div className="trackWrapper">
          <div className="character girl">
            <img alt="Girl" src="/img/illustration/girl.gif" />
          </div>
          <div className="character boy">
            <img alt="Boy" src="/img/illustration/boy.gif" />
          </div>
          <img
            className="obstacle one"
            alt="Obstacle"
            src="/img/illustration/obstacle.svg"
          />
          <img
            className="obstacle two"
            alt="Obstacle"
            src="/img/illustration/obstacle.svg"
          />
          <img
            className="obstacle three"
            alt="Obstacle"
            src="/img/illustration/obstacle.svg"
          />
          <span className="track" />
          <img
            className="tree one"
            alt="Tree"
            src="/img/illustration/tree-one.svg"
          />
          <img
            className="tree two"
            alt="Tree"
            src="/img/illustration/tree-two.svg"
          />
          <img
            className="tree three"
            alt="Tree"
            src="/img/illustration/tree-three.svg"
          />
        </div>
        <span className="grass med" />
        <span className="grass dark" />
      </div>
    </div>
  );
};

export default Illustration;