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

import Container from "@/components/container"
import { CustomLink, ListLayout } from "@/components"
import t from "@/constants/wording"
import { EnterpriseCooperationResource } from "@/constants/education"

import * as styles from "./index.module.scss"

const EnterpriseCooperation: React.FC = () => {
  return (
    <section className={styles.backgroundContainer}>
      <Container
        className={cls(styles.container, "is-flex is-flex-direction-column")}
      >
        <h1>{t("campus & enterprise cooperation")}</h1>
        <ListLayout
          listData={EnterpriseCooperationResource}
          className={cls(styles.cardContainer)}
        >
          {item => {
            const { title, description, logo, link } = item
            return (
              <CustomLink linkTo={link}>
                <div className={cls(styles.card, "is-flex")}>
                  <div>
                    <figure className={cls(styles.image)}>
                      <img
                        src={logo}
                        alt={"Enterprise & Campus Cooperation logo"}
                      />
                    </figure>
                  </div>
                  <div className="pl-4">
                    <h4 className={cls(styles.title)}>{title}</h4>
                    <p className={cls(styles.description)}>{description}</p>
                  </div>
                </div>
              </CustomLink>
            )
          }}
        </ListLayout>
      </Container>
    </section>
  )
}

export default EnterpriseCooperation