import styles from './SubIntro.module.scss';
import {
  Image as ImageI,
  TitleDescriptionFormat as TitleDescriptionFormatI,
} from '../../models/common';
import Image from './../Image';
import w from '../../public/imgs/w.svg';
import flag from '../../public/imgs/flag.gif';
import flagBlue from '../../public/imgs/flag_blue.gif';

export type Props = {
  title: string;
  messages: TitleDescriptionFormatI[];
  image: ImageI;
};

const SubIntro = (props: Props): JSX.Element => {
  const { title, messages, image = w } = props;
  return (
    <div className={styles.subIntroContainer}>
      <div className={styles.mobileImage}>
        <div className={styles.mobileImageContainer}>
          <div className={styles.flag}>
            <Image image={flag} alt={image?.alt || ''} />
          </div>
          <Image image={w} alt={image?.alt || ''} />
        </div>
      </div>
      <div className={styles.subIntro}>
        <div className={styles.content}>
          <div className={styles.titleContainer}>
            <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
          </div>
          <div className={styles.container}>
            <div className={`text_5 ${styles.firstCol}`}>
              {messages?.map((message, id) => (
                <div key={id}>
                  <div className={styles.title} key={id}>
                    <div className={`h6 ${styles.h6}`}>{message.title}</div>
                  </div>
                  <div className="text_4">{message.text}</div>
                </div>
              ))}
            </div>
            <div className={styles.secondCol}>
              <div className={styles.flag}>
                <Image image={flagBlue} alt={image?.alt || ''} />
              </div>
              <Image image={w} alt={image?.alt || ''} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SubIntro;