import Link from '../Link';
import styles from './Related.module.scss';
import { Link as LinkI } from '../../models/common';
import { Fragment } from 'react';

export type Props = {
  title?: string;
  text: string;
  links?: LinkI[];
  isTextOnLeft: boolean;
};

const Related = (props: Props): JSX.Element => {
  const { title, text, links, isTextOnLeft } = props;
  return (
    <div
      className={`${styles.related} ${
        isTextOnLeft ? '' : styles.reverseContainer
      }`}
    >
      <div className={styles.container}>
        {title && <div className={`text_4 ${styles.title}`}>{title}</div>}
        <div className={styles.titleText}>
          <div
            className="medium_text"
            dangerouslySetInnerHTML={{ __html: text }}
          ></div>
        </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}
                >
                  {link?.label}
                </Link>
              )}
              {id !== links.length - 1 && <br />}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Related;