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

import Seo from "@/components/seo"
import { Layout, Banner, LearnMoreSection, CustomLink } from "@/components"
import { LEARN_MORE_PRACTICE_SECTION } from "@/constants/case"
import PracticeBody from "@/components/practice"
import t from "@/constants/wording"

const PracticePage: React.FC<PageProps<FetchPractiseDataQuery>> = ({
  data,
}) => {
  // todo: Yixing - add seo data
  const {
    strapiBestPracticePage: { homeBanner },
    allStrapiBestPractices: { nodes },
  } = data
  return (
    <Layout>
      <Seo
        title={t("Practice")}
        description={t("TiDB best practices")}
        keywords={t("keywords")}
      />
      <Banner
        image={homeBanner}
        title={t("practice page banner title")}
        subtitle={t("practice page banner subtitle")}
        attrs={{ style: { maxWidth: "52rem" } }}
      >
        <CustomLink
          className="button is-white is-medium"
          linkTo={"/contact/"}
        >
          {t("consult technical consultant")}
        </CustomLink>
      </Banner>
      <PracticeBody list={[...nodes]}></PracticeBody>
      <LearnMoreSection data={LEARN_MORE_PRACTICE_SECTION} />
    </Layout>
  )
}

export const data = graphql`
  query FetchPracticeDataQuery {
    strapiBestPracticePage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
    allStrapiBestPractices(sort: { fields: order, order: ASC }) {
      nodes {
        id
        tags
        title
        order
        description
        keywords
        customUrl
      }
    }
  }
`

export default PracticePage