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

type IProps = {
  information: {
    key: string
    id: string
    contactInformationValues: {
      value: string
      id: string
    }[]
  }[]
}

const ContactInformation: React.FC<IProps> = ({ information }) => {
  return (
    <div className={styles.container}>
      <Container className={styles.customContainer}>
        <h2 className={styles.h2}>{t("contact details")}</h2>
        <section className={styles.infoContainer}>
          {information.map(info => (
            <div className={styles.info} key={info.id}>
              <header className={styles.key}>{info.key}</header>
              <section>
                {info.contactInformationValues.map(value => (
                  <div className={styles.value} key={value.id}>
                    {value.value}
                  </div>
                ))}
              </section>
            </div>
          ))}
        </section>
      </Container>
    </div>
  )
}

export default ContactInformation