import { FC } from "react";

import styles from './main-paragraph.module.scss';

interface MainParagraph {
  title?: string;
  columnOne: { title: string; description: string }[];
  columnTwo: { title: string; description: string }[];
}

const MainParagraphComponent: FC<MainParagraph> = ({ title, columnOne, columnTwo }) => {
  return (
    <div className={styles.mainParagraph}>
      <div className="columns is-multiline">
        {title && <div className={`column is-9-desktop is-12-tablet ${columnOne.length === 0 || columnTwo.length === 0 ? 'is-offset-3-desktop' : ''}`}>
          <h1 className="main-paragraph-title">{title}</h1>
        </div>}
        {columnOne && <div className={`column is-6-desktop is-12-tablet ${!columnTwo || columnTwo.length === 0 ? 'is-offset-3-desktop' : ''}`}>
          <div className={styles.content}>
            {columnOne.map((item, index) => {
              const { title, description } = item;

              return (
                <div className="main-paragraph-content" key={index}>
                  {title && <h1>{title}</h1>}
                  {description && <p dangerouslySetInnerHTML={{ __html: description }}></p>}
                </div>
              );
            })}
          </div>
        </div>}
        {columnTwo && <div className={`column is-6-desktop is-12-tablet ${!columnOne || columnOne.length === 0 ? 'is-offset-3-desktop' : ''}`}>
          <div className={styles.content}>
            {columnTwo.map((item, index) => {
              const { title, description } = item;

              return (
                <div className="main-paragraph-content" key={index}>
                  {title && <h1>{title}</h1>}
                  {description && <p dangerouslySetInnerHTML={{ __html: description }}></p>}
                </div>
              );
            })}
          </div>
        </div>}
      </div>
    </div>
  );
};

export default MainParagraphComponent;