import styles from './WorkDetailIntro.module.scss';

export type Props = {
  deliverableTitle: string;
  deliverables: string[];
  intro: string;
  title: string;
  description: string;
};

const WorkDetailIntro = (props: Props): JSX.Element => {
  const {
    deliverableTitle = 'Deliverables',
    deliverables,
    intro,
    title,
    description = '',
  } = props;
  return (
    <div className={styles.container}>
      <div className={styles.leftContent}>
        <div className={`h7 ${styles.deliverableTitle}`}>
          {deliverableTitle}
        </div>
        {deliverables.map((deliverable, key) => (
          <div key={key} className={`text_5 ${styles.deliverable}`}>
            {deliverable}
          </div>
        ))}
      </div>
      <div className={styles.rightContent}>
        <div
          className={`text_2 ${styles.intro}`}
          dangerouslySetInnerHTML={{ __html: intro }}
        ></div>
        <div className={styles.content}>
          <div className={styles.title}>
            <div
              className={`h5 ${styles.h5}`}
              dangerouslySetInnerHTML={{ __html: title }}
            ></div>
          </div>
          <div
            className={`text_5 ${styles.description}`}
            dangerouslySetInnerHTML={{ __html: description }}
          ></div>
        </div>
      </div>
    </div>
  );
};

export default WorkDetailIntro;