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

type IProps = {
  officeLocations: {
    addressDetail: string
    countryCity: string
    id: string
  }[]
}

const Offices: React.FC<IProps> = ({ officeLocations }) => {
  return (
    <div className={styles.container}>
      <Container className={styles.customContainer}>
        <h2>{t("office address")}</h2>
        <section
          className={cls(
            styles.officeContainer,
            "columns is-flex is-variable is-4 is-flex-wrap-wrap	"
          )}
        >
          {officeLocations.map(item => (
            <div
              className={cls(
                styles.address,
                "column is-half-desktop is-half-tablet is-full-mobile"
              )}
              key={item.id}
            >
              <h5 className={styles.h5}>{item.countryCity}</h5>
              <section>{item.addressDetail}</section>
            </div>
          ))}
        </section>
      </Container>
    </div>
  )
}

export default Offices