import React from 'react';
import LogoRawSVG from '../assets/icons/logo-raw.svg';
import css from '../templates/RatingPage/index.module.css';
import Link from '../blocks/Link';
import Image from '../blocks/Image';

export const RatingHeader = ({ LinkProps }): JSX.Element => {
  return (
    <>
      <div className={css.rating__header}>
        <div className={css.rating__headerLogoWrapper}>
          <Link
            {...LinkProps}
            aria-label="Back to home"
            className={css.rating__logoLink}
          >
            <LogoRawSVG className={css.rating__headerLogo} />
          </Link>
        </div>
      </div>
    </>
  );
};

export const RatingFooter = ({
  translations,
  milaFlowImages,
  EnterprisePartnerName,
}): JSX.Element => {
  return (
    <>
      <div className={css.rating__milaflowHeader}>
        <h2 className={css.rating__milaflowTitle}>
          {' '}
          {translations.milaflowTitle}{' '}
        </h2>
        {!EnterprisePartnerName && (
          <div className={css.rating__milaflowSubtitle}>
            {' '}
            {translations.milaflowSubtitle}
          </div>
        )}
        {EnterprisePartnerName && (
          <div className={css.rating__milaflowSubtitle}>
            {' '}
            {translations.milaflowSubTitlePart1 +
              ' ' +
              EnterprisePartnerName +
              ', ' +
              translations.milaflowSubTitlePart2}
          </div>
        )}
      </div>
      <div className={css.rating__milaflowContent}>
        <div className={css.rating__milaflowStep1}>
          <div className={css.rating__bg}>
            <Image
              src={milaFlowImages.milaflowImageStep1}
              className={css.rating__step1Logo}
            />
          </div>
          <div className={css.rating__milaflowText}>
            {translations.milaflowText1}
          </div>
        </div>
        <div className={css.rating__milaflowStep2}>
          <div className={css.rating__bg}>
            <Image
              src={milaFlowImages.milaflowImageStep2}
              className={css.rating__step2Logo}
            />
          </div>
          <div className={css.rating__milaflowText}>
            {translations.milaflowText2}
          </div>
        </div>
        <div className={css.rating__milaflowStep3}>
          <div className={css.rating__bg}>
            <Image
              src={milaFlowImages.milaflowImageStep3}
              className={css.rating__step3Logo}
            />
          </div>
          <div className={css.rating__milaflowText}>
            {translations.milaflowText3}
          </div>
        </div>
      </div>
    </>
  );
};