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

interface IProps {
  whoAreWeDescription: string
  keyNumbers: {
    id: string
    value: string
    description: string
  }[]
}

const WhoAreWe: React.FC<IProps> = ({ whoAreWeDescription, keyNumbers }) => {
  return (
    <Container>
      <div className={styles.whoAreWe}>
        <div className="common-center-container">
          <h2>{t("who are we")}</h2>
          <p className="pt-5">{whoAreWeDescription.replace(/\n/g, "\n\n")}</p>
          <div className={cls(styles.keyNumber, "is-flex is-flex-wrap-wrap")}>
            {keyNumbers.map(item => (
              <div
                className="column is-half is-full-mobile has-text-centered px-4 py-0"
                key={item.id}
              >
                <p className={styles.value}>{item.value}</p>
                <p className={styles.description}>{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  )
}

export default WhoAreWe