import React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import { Container } from "@/components"

interface IProps {
  founderStory: {
    image: ImageComponent
    title: string
    body: string
  }
  staffStory: {
    image: ImageComponent
    title: string
    body: string
  }
}

const FounderAndStaffStory: React.FC<IProps> = ({
  founderStory,
  staffStory,
}) => {
  return (
    <Container>
      <div
        className={cls(styles.founderAndStaffStory, "common-center-container")}
      >
        <div className={cls(styles.story, styles.founderStory)}>
          <img
            src={founderStory.image.media.url}
            alt={founderStory.image.alt}
            className={styles.storyImage}
          />
          <div className={styles.founderBody}>
            <h2>{founderStory.title}</h2>
            <p>{founderStory.body.replace(/\n/g, "\n\n")}</p>
          </div>
        </div>
        <div className={cls(styles.story, styles.staffStory)}>
          <div className={styles.staffBody}>
            <h2>{staffStory.title}</h2>
            <p>{staffStory.body.replace(/\n/g, "\n\n")}</p>
          </div>
          <img
            src={staffStory.image.media.url}
            alt={staffStory.image.alt}
            className={styles.storyImage}
          />
        </div>
      </div>
    </Container>
  )
}

export default FounderAndStaffStory