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

interface IProps {
  location: ILocation
}

const EducationLecturer: React.FC<IProps> = ({ location }) => {
  const data = useStaticQuery<EducationCampusQuery>(graphql`
    query StrapiEducationLecturerQuery {
      strapiEducation {
        lecturerIntroductionBg {
          alt
          media {
            url
            width
            height
          }
        }
        lecturerCooperationModelBg {
          alt
          media {
            url
            width
            height
          }
        }
      }
      allStrapiStoryCards(limit: 3, sort: { fields: order, order: ASC }) {
        nodes {
          image {
            alt
            media {
              width
              url
              height
            }
          }
          name
          title
          id
          description
        }
      }
    }
  `)

  const introductionBg = data.strapiEducation.lecturerIntroductionBg
  const cooperationModelBg = data.strapiEducation.lecturerCooperationModelBg
  const storyData: storyData[] = data.allStrapiStoryCards.nodes || []
  const storyDataList = {
    storyClassName: "lecturer-story",
    storyName: "讲师故事",
    storyData: storyData,
  }

  return (
    <Layout>
      <Seo
        title={t("Education.Lecturer")}
        description={t(
          "PingCAP certified lecturers are lecturers who are certified by PingCAP and have the ability to deliver TiDB courses."
        )}
        keywords={t("keywords")}
      />
      <CampusEnterpriseCooperation
        pageType={"lecturer"}
        {...LECTURER_DATA}
        {...storyDataList}
        introductionBg={introductionBg}
        cooperationModelBg={cooperationModelBg}
        location={location}
      />
    </Layout>
  )
}

export default EducationLecturer