import Link, { LinkSizeIcon } from '../Link';
import styles from './Capabilities.module.scss';
import { Image as ImageI, Link as LinkI } from '../../models/common';
import Img from './../Image';
import { Fragment } from 'react';

export type Props = {
  indexNr: string;
  title: string;
  descriptionTitle: string;
  descriptionText: string;
  isImageFirst: boolean;
  image: ImageI;
  imgLink?: LinkI;
  links?: LinkI[];
};

const Capabilities = (props: Props): JSX.Element => {
  const {
    indexNr,
    title,
    descriptionTitle,
    descriptionText,
    isImageFirst,
    image,
    links,
    imgLink,
  } = props;
  return (
    <div
      className={`${styles.capabilities} ${
        isImageFirst ? styles.reverseContainer : ''
      }`}
    >
      <div className={styles.capabilities_col_text}>
        <div className={styles.nrContainer}>
          <div className={`medium_text ${styles.medium_text}`}>{indexNr}</div>
        </div>
        <div className={styles.contentContainer}>
          <div className={styles.contentContainer_title}>
            <div className={styles.title}>
              <div className={`medium_text ${styles.medium_text}`}>{title}</div>
            </div>
          </div>
          <div className={styles.contentContainer_description_title}>
            <div className={`h6 ${styles.h6}`}>{descriptionTitle}</div>
          </div>
          <div className={`text_5 ${styles.contentContainer_description_text}`}>
            {descriptionText}
          </div>
          <div className={styles.links}>
            {links?.map((link, id) => (
              <Fragment key={id}>
                {link?.url && (
                  <Link
                    href={link?.url}
                    type={link.style?.type}
                    iconSize={link.style?.iconSize}
                    textSize={link.style?.textSize}
                    isIconFirst={link.style?.isIconFirst}
                    isExternal={link.isExternal}
                  >
                    {link?.label || ''}
                  </Link>
                )}
              </Fragment>
            ))}
          </div>
        </div>
      </div>
      <div className={styles.capabilities_col_image}>
        <Img
          alt={image?.alt || ''}
          image={{ ...image, width: 638, height: 802 }}
          isParralaxImg={true}
        />
        <div
          className={`${styles.capabilities_col_link} ${
            !isImageFirst ? styles.reverseContainer : ''
          }`}
        >
          <div>
            {imgLink?.url && (
              <Link
                href={imgLink?.url}
                type={imgLink.style?.type}
                iconSize={LinkSizeIcon.SMALL}
                textSize={imgLink.style?.textSize}
                isIconFirst={imgLink.style?.isIconFirst}
                isExternal={imgLink.isExternal}
              >
                {imgLink?.label || ''}
              </Link>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Capabilities;