/* eslint-disable @next/next/no-img-element */
import Link from '../Link';
import styles from './LatestProject.module.scss';
import Img from '../Image';
import logos from '../../public/imgs/co-logos.svg';
import useTranslation from 'next-translate/useTranslation';
import { BlockLatestProject } from '../../models/page';
import NextImage from 'next/legacy/image';
import { useMediaQuery } from 'react-responsive';

export type Props = BlockLatestProject;

const fileUrl = '/eae_ficha_projeto.pdf';
const LatestProject = (props: Props): JSX.Element => {
  const { title, description, isImageFirst, image, link } = props;
  const { t } = useTranslation();
  const isDesktop = useMediaQuery({ query: '(min-width: 900px)' });

  let imageWidth = 400;
  let imageHeight = 400;

  if (isDesktop){
     imageWidth = 852;
     imageHeight = 852;
  }


  return (
    <div
      className={`${styles.latestProject} ${
        !isImageFirst ? styles.reverseContainer : ''
      }`}
    >
      <div className={styles.latestProject_col_text}>
        <div className={styles.coFinanced}>
          <span>{t('common:footer.co-financed-by')} </span>
          <a
            href={fileUrl}
            target='_blank'
            rel='noopener noreferrer'
            aria-label='co financed image'
          >
            <NextImage src={logos.src} width={472} height={34} alt='co financed by' />
          </a>
        </div>
        <div className={styles.textContainer}>
          <div className={styles.textContent}>
            <h4>{title}</h4>
            <div className={styles.colTablet}>
              <div className={`text_5 ${styles.text_5_white}`}>
                {description}
              </div>
              <div className={styles.actionContainer}>
                {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>
      </div>
      <div className={styles.latestProject_col_image}>
        <Img
          alt={image?.alt || ''}
          image={{ ...image, width: imageWidth, height: imageHeight, priority: true }}
          isParralaxImg={true}
        />
      </div>
      <div className={`${styles.coFinanced} ${styles.coFinancedMobile}`}>
        <span>{t('common:footer.co-financed-by')} </span>
        <a
          aria-label='footer with co financed image'
          href={fileUrl}
          target='_blank'
          rel='noopener noreferrer'
        >
          {logos.src && <NextImage src={logos.src} width={472} height={34} alt='co financed image' />}
        </a>
      </div>
    </div>
  );
};

export default LatestProject;