import styles from './OurValues.module.scss';
import { TitleDescriptionFormat as TitleDescriptionFormatI } from '../../models/common';

export type Props = {
  title: string;
  messages: TitleDescriptionFormatI[];
};

const OurValues = (props: Props): JSX.Element => {
  const { title, messages } = props;
  return (
    <div className={styles.container}>
      <div className={styles.leftCol}>
        <h1>{title}</h1>
      </div>
      <div className={styles.rightCol}>
        {messages.map((message, id) => (
          <div className={styles.rightColContainer} key={id}>
            <div className={styles.title}>
              <div className={`h5 ${styles.h5}`}>{message.title}</div>
            </div>
            <div className="text_5">{message.text}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default OurValues;