import Link from '../Link';
import { Fragment } from 'react';
import styles from './MeetUs.module.scss';
import arrow from '../../public/imgs/icons/logo-chevron.svg';
import { Image as ImageI, Link as LinkI } from '../../models/common';
import Img from '../Image';

export type Props = {
  image: ImageI;
  title: string;
  description: string;
  link: LinkI;
};

const MeetUs = (props: Props): JSX.Element => {
  const { image, title, description, link } = props;

  return (
    <div className={styles.meetUsContainer}>
      <Img alt={image?.alt || ''} image={image} isParralaxImg={true} />
      <div className={styles.container}>
        <div className={`${styles.content}`}>
          <div className={`medium_text ${styles.medium_text}`}>{title}</div>
          <div className={styles.contentDescription}>
            <p className={`text_5 ${styles.text_5}`}>{description}</p>
            {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>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default MeetUs;