import Link from '../Link';
import NextLink from 'next/link';
import { Fragment } from 'react';
import styles from './HighLights.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';
import { useMediaQuery } from 'react-responsive';

export type Props = {
  image: ImageI;
  title: string;
  keywords?: string[];
  description?: string;
  link?: LinkI;
};

const HighLights = (props: Props): JSX.Element => {
  const { image, title, keywords, description, link } = props;
  const isTablet = useMediaQuery({ query: '(min-width: 560px)' });
  const layout = image.width ? 'responsive' : 'intrinsic';

  return (
    <div className={styles.highlightContainer}>
      <div className={styles.imageContainer}>
        {link?.url ? (
          <NextLink href={link?.url} legacyBehavior={true}>
            <a aria-label="image">
              <Img
                alt={image?.alt || ''}
                image={{ ...image, layout }}
                isParralaxImg={true}
              />
            </a>
          </NextLink>
        ) : (
          <Img
            alt={image?.alt || ''}
            image={{ ...image, layout }}
            isParralaxImg={true}
          />
        )}
      </div>
      <div className={styles.content}>
        <div
          className={`${styles.contentTitle} ${
            description ? styles.fullHeight : ''
          }`}
        >
          {link?.url ? (
            <NextLink href={link?.url} legacyBehavior={true}>
              <a>
                <div className={`medium_text ${styles.medium_text}`}>
                  {title}
                </div>
              </a>
            </NextLink>
          ) : (
            <div className={`medium_text ${styles.medium_text}`}>{title}</div>
          )}
          {keywords && keywords.length > 0 && keywords[0] !== '' && (
            <div className={styles.keywords}>
              {keywords.map((keyword, id) => (
                <Fragment key={id}>
                  {keyword}{' '}
                  {id !== keywords.length - 1 ? (
                    <svg className={styles.chevron}>
                      <use href={`${arrow.src}#logo-chevron`}></use>
                    </svg>
                  ) : null}
                </Fragment>
              ))}
            </div>
          )}
        </div>
        {description && (
          <div className={styles.contentDescription}>
            <p className="text_5">{description}</p>
            <br />
            {link?.url && (
              <Link
                href={link?.url}
                type={link.style?.type}
                iconSize={link.style?.iconSize}
                textSize={link.style?.textSize}
                isIconFirst={isTablet ? link.style?.isIconFirst : true}
                isExternal={link.isExternal}
              >
                {link?.label}
              </Link>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default HighLights;