import * as React from "react"
import { Container, ListLayout, ListImg } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

interface IProps {
  data: {
    description: string
    data: OurTeam[]
  }
}

interface OurTeam {
  title: string
  description: string
  image: imgMedia
}

const OurTeam: React.FC<IProps> = ({ data }) => {
  return (
    <div className={styles.ourTeam}>
      <Container isSmall={true}>
        <h2>{t("our team")}</h2>
        <p className={styles.description}>{data.description}</p>
        <div className={styles.listShow}>
          <ListLayout listData={data.data}>
            {item => (
              <div className={styles.inner}>
                <div className={styles.header}>
                  <ListImg
                    className={styles.listBg}
                    imgInfo={item.image}
                    scale={[416, 140]}
                  />
                  <div className={styles.listTitle}>
                    <h4>{item.title}</h4>
                  </div>
                </div>
                <p>{item.description}</p>
              </div>
            )}
          </ListLayout>
        </div>
      </Container>
    </div>
  )
}

export default OurTeam