import * as React from "react"
import cls from "classnames"

import DetailBackground from "../../background/detail-background"
import Container from "@/components/container"

import * as styles from "./index.module.scss"
import t from "@/constants/wording"
import LinkModule from "@/components/link-module"
import ListLayout from "@/components/list-layout"

export declare type IProps = {
  enterpriseEducation: Image
  listData: {
    title: string
    description: string
  }[]
}

const EnterpriseTraining: React.FC<IProps> = props => {
  const { listData, enterpriseEducation } = props
  return (
    <DetailBackground
      url={enterpriseEducation?.media?.url}
      className={styles.backgroundContainer}
      id="EnterpriseTraining"
    >
      <Container
        className={cls(
          styles.container,
          "is-flex is-flex-direction-column is-align-items-center"
        )}
      >
        <h1>{t("enterprise training")}</h1>
        <ListLayout listData={listData} className={styles.cardContainer}>
          {item => (
            <div className={styles.card}>
              <h4>{item.title}</h4>
              <p className={styles.description}>{item.description}</p>
            </div>
          )}
        </ListLayout>
        <div>
          <LinkModule to={"/contact/"}>{t("training consult")}</LinkModule>
        </div>
      </Container>
    </DetailBackground>
  )
}

export default EnterpriseTraining