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

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import EducationBanner from "@/components/education/education-banner"
import EducationRole from "@/components/education/education-role"
import CertificationType from "@/components/education/certification-type"
import DescriptionButtonAndLogoWall from "@/components/description-button-and-logo-wall"
import OnlineEduction from "@/components/education/online-education"
import WhyEducation from "@/components/education/why-pingcap-education"
import t from "@/constants/wording"
import {
  EDUCATION_COMMUNITY_RESOURCES,
  EDUCATION_LOGO_WALL,
} from "@/constants/education"
import EnterpriseTraining from "@/components/education/enterprise-training"
import EnterpriseCooperation from "@/components/education/enterprise-cooperation"
import CommunityResources from "@/components/community-resources"

const EducationPage: React.FC<PageProps<FetchEducationDataQuery> & { location: ILocation }> = ({
  data,
  location,
}) => {
  const {
    allStrapiLogoWallForEducations,
    allStrapiEducationTrainingCases: { nodes },
    strapiEducation,
  } = data

  const enterpriseTrainingModle = {
    ...strapiEducation,
    listData: nodes || [],
  }
  return (
    <Layout>
      <Seo
        title={t("Education.PingCAP")}
        description={t(
          "PingCAP Education is committed to cultivating first-class talents in the development"
        )}
        keywords={t("keywords")}
      />
      <EducationBanner />
      <EducationRole location={location} />
      <WhyEducation />
      <CertificationType />
      <OnlineEduction />
      <DescriptionButtonAndLogoWall
        content={EDUCATION_LOGO_WALL}
        image={allStrapiLogoWallForEducations}
        location={location}
      />
      <EnterpriseTraining {...enterpriseTrainingModle} />
      <EnterpriseCooperation />
      <CommunityResources
        name={EDUCATION_COMMUNITY_RESOURCES.name}
        data={EDUCATION_COMMUNITY_RESOURCES.data}
        className="has-background-white"
      />
    </Layout>
  )
}

export const data = graphql`
  query FetchEducationDataQuery {
    allStrapiLogoWallForEducations(
      sort: { fields: order, order: ASC }
      limit: 6
    ) {
      edges {
        node {
          logo {
            alt
            media {
              url
            }
          }
          id
        }
      }
    }
    allStrapiEducationTrainingCases(
      sort: { fields: id, order: ASC }
      limit: 2
    ) {
      nodes {
        title
        id
        description
      }
    }
    strapiEducation {
      enterpriseEducation {
        alt
        media {
          url
        }
      }
    }
  }
`

export default EducationPage