import React from "react"
import * as styles from "./index.module.scss"
import { Container } from "@/components"
import { graphql, useStaticQuery } from "gatsby"
import { VALUE_AND_MISSION } from "@/constants/about-us"

const OurMissionAndValues: React.FC = () => {
  const data = useStaticQuery<StrapiCompanyOverviewImage>(graphql`
    query StrapValueAndMissionQuery {
      strapiCompanyOverview {
        mission {
          media {
            url
          }
        }
        value {
          media {
            url
          }
        }
      }
    }
  `)

  const missionImg = data.strapiCompanyOverview.mission
  const valueImg = data.strapiCompanyOverview.value

  return (
    <Container>
      <div className={styles.valueAndMission}>
        <div className="common-center-container">
          <h2>{VALUE_AND_MISSION.title}</h2>
          <div
            className={styles.backgroundContainer}
            style={{ backgroundImage: `url(${missionImg.media.url})` }}
          >
            <p>{VALUE_AND_MISSION.mission.title}</p>
            <h2>{VALUE_AND_MISSION.mission.description}</h2>
          </div>
          <div
            className={styles.backgroundContainer}
            style={{ backgroundImage: `url(${valueImg.media.url})` }}
          >
            <p>{VALUE_AND_MISSION.value.title}</p>
            <h2>{VALUE_AND_MISSION.value.description}</h2>
          </div>
        </div>
      </div>
    </Container>
  )
}

export default OurMissionAndValues