import Link, { LinkSizeIcon, LinkSizeText, LinkType } from '../Link';
import styles from './CareerDetail.module.scss';
import {
  Link as LinkI,
  TitleDescriptionFormat as TitleDescriptionFormatI,
} from '../../models/common';
import { useRouter } from 'next/dist/client/router';
import { Languages } from '../../models/page';

export type Props = {
  title: string;
  url: string;
  details: TitleDescriptionFormatI[];
  specs: TitleDescriptionFormatI[];
  link: LinkI;
  linkDescription: string;
  languages?: Languages;
};

const CareerDetail = (props: Props): JSX.Element => {
  const router = useRouter();
  const { locale: activeLocale } = router;
  const { title, url, details, specs, link, linkDescription, languages } =
    props;

  return (
    <div className={styles.careerDetailContainer}>
      <div className={styles.container}>
        <div className={`h2_links ${styles.contentTitle}`}>
          {title && url && (
            <Link
              href={
                languages && activeLocale
                  ? `${languages[activeLocale].url}`
                  : `${link.url}`
              }
              type={LinkType.HYPERLINK_ICON}
              iconSize={LinkSizeIcon.EXTRALARGE}
              textSize={LinkSizeText.LARGE}
            >
              {title}
            </Link>
          )}
        </div>
        <div className={styles.contentKeywords}>
          {details?.map((detail, id) => (
            <div key={id}>
              <div className="h7">{detail.title}</div>
              <div className="text_5">{detail.text}</div>
            </div>
          ))}
        </div>
        <div className={styles.contentData}>
          {specs?.map((el, id) => (
            <div key={id}>
              <div className={`h5 ${styles.h5}`}>{el.title}</div>
              <div
                className={`text_4 ${styles.text_4}`}
                dangerouslySetInnerHTML={{ __html: el.text }}
              ></div>
            </div>
          ))}
          <div>
            <div className={`h5 ${styles.h5}`}>
              {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
              className={`text_4 ${styles.text_4}`}
              dangerouslySetInnerHTML={{ __html: linkDescription || '' }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CareerDetail;