import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import CampusEnterpriseCooperation from "@/components/education/campus-enterprise-cooperation"
import { CAMPUS_DATA } from "@/constants/education-campus"
import t from "@/constants/wording"

interface IProps {
  location: ILocation
}

const EducationCampus: React.FC<IProps> = ({ location }) => {
  const data = useStaticQuery<EducationCampusQuery>(graphql`
    query StrapiEducationCampusQuery {
      strapiEducation {
        campusIntroductionBg {
          alt
          media {
            url
            width
            height
          }
        }
        campusCooperationModelBg {
          alt
          media {
            url
            width
            height
          }
        }
      }
      allStrapiEducationCampusLatestNews(
        limit: 3
        sort: { fields: order, order: ASC }
      ) {
        nodes {
          title
          description
          image {
            alt
            media {
              width
              url
              height
            }
          }
        }
      }
    }
  `)

  const introductionBg = data.strapiEducation.campusIntroductionBg
  const cooperationModelBg = data.strapiEducation.campusCooperationModelBg
  const recentNews = data.allStrapiEducationCampusLatestNews.nodes

  return (
    <Layout>
      <Seo
        title={t("Education.Campus")}
        description={t(
          "PingCAP campus talent ecology is committed to integrating domestic and foreign university resources"
        )}
        keywords={t("keywords")}
      />
      <CampusEnterpriseCooperation
        pageType={"campus"}
        {...CAMPUS_DATA}
        introductionBg={introductionBg}
        cooperationModelBg={cooperationModelBg}
        recentNews={recentNews}
        location={location}
      />
    </Layout>
  )
}

export default EducationCampus