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

const WhyEducation = () => {
  return (
    <div className={styles.container}>
      <Container>
        <h1 className="common-h1-title">{t("why pingcap education")}</h1>
        <ListLayout listData={WhyPingCapEducation}>
          {item => (
            <div className={styles.inner}>
              <Icon name={item.icon} />
              <h3>{item.title}</h3>
              <h5>{item.description}</h5>
            </div>
          )}
        </ListLayout>
      </Container>
    </div>
  )
}

export default WhyEducation