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 { SCIENCE_DATA } from "@/constants/education-science"
import t from "@/constants/wording"

interface IProps {
  location: ILocation
}

const EducationScience: React.FC<IProps> = ({ location }) => {
  const data = useStaticQuery<EducationCampusQuery>(graphql`
    query StrapiEducationScienceQuery {
      strapiEducation {
        scienceIntroductionBg {
          alt
          media {
            url
            width
            height
          }
        }
        scienceCooperationModelBg {
          alt
          media {
            url
            width
            height
          }
        }
      }
      allStrapiEducationScienceLatestNews(
        limit: 3
        sort: { fields: order, order: ASC }
      ) {
        nodes {
          title
          description
          image {
            alt
            media {
              width
              url
              height
            }
          }
        }
      }
    }
  `)

  const introductionBg = data.strapiEducation.scienceIntroductionBg
  const cooperationModelBg = data.strapiEducation.scienceCooperationModelBg
  const recentNews = data.allStrapiEducationScienceLatestNews.nodes

  return (
    <Layout>
      <Seo
        title={t("Education.Science")}
        description={t(
          "As a leader in open source databases, PingCAP attaches great importance to cutting-edge research in the database field."
        )}
        keywords={t("keywords")}
      />
      <CampusEnterpriseCooperation
        pageType={"science"}
        {...SCIENCE_DATA}
        introductionBg={introductionBg}
        cooperationModelBg={cooperationModelBg}
        recentNews={recentNews}
        location={location}
      />
    </Layout>
  )
}

export default EducationScience