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

interface IProps {
  socialResponsibilities: {
    id: string
    title: string
    description: string
  }[]
}

const SocialResponsibilities: React.FC<IProps> = ({
  socialResponsibilities,
}) => {
  return (
    <Container>
      <div className={styles.socialResponsibilities}>
        <div className="common-center-container">
          <h2>{t("our social responsibility")}</h2>
          {socialResponsibilities.map(item => (
            <div className={styles.responsibility} key={item.id}>
              <h4>{item.title}</h4>
              <p>{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </Container>
  )
}

export default SocialResponsibilities