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

import Seo from "@/components/seo"
import { Layout, Banner, CustomLink } from "@/components"
import t from "@/constants/wording"
import { PartnerGroup } from "@/components/partner/partner-group"
import DescriptionButtonAndLogoWall from "@/components/description-button-and-logo-wall-partner"
import {
  PARTNER_COMMUNITY_RESOURCES,
  PARTNER_JOINT_SOLUTION,
  PARTNER_LOGO_WALL,
} from "@/constants/partner"
import JointSolution from "@/components/joint-solution/section"
import CommunityResources from "@/components/community-resources"

const PartnerPage: React.FC<
  PageProps<FetchPartnerDataQuery> & { location: ILocation }
> = ({ data, location }) => {
  const {
    strapiPartnerPage: { homeBanner },
    allStrapiLogoWallForPartners,
    allStrapiPartnerTypes: { nodes },
  } = data
  const partnerTypesList = nodes || []
  return (
    <Layout>
      <Seo
        title={t("Partner.PingCAP")}
        description={t(
          "As a converged database product positioned for online transaction processing/online analysis and processing"
        )}
        keywords={t("keywords")}
      />
      <Banner
        image={homeBanner}
        title={t("partner page banner title")}
        subtitle={t("partner page banner subtitle")}
        attrs={{ style: { maxWidth: "47rem" } }}
      >
        <CustomLink
          className="button is-outlined is-white is-medium"
          linkTo={"/joint-solution"}
        >
          {t("find joint solution")}
        </CustomLink>
        <CustomLink
          className="button is-white is-medium"
          linkTo={"/search-partner"}
        >
          {t("Find all PingCap partners")}
        </CustomLink>
      </Banner>
      <PartnerGroup partnerTypesList={partnerTypesList} />
      <DescriptionButtonAndLogoWall
        content={PARTNER_LOGO_WALL}
        image={allStrapiLogoWallForPartners}
        location={location}
      />
      <JointSolution title={PARTNER_JOINT_SOLUTION.title} />
      <CommunityResources
        name={PARTNER_COMMUNITY_RESOURCES.name}
        data={PARTNER_COMMUNITY_RESOURCES.data}
        className="has-background-white"
      />
    </Layout>
  )
}

export const data = graphql`
  query FetchPartnerDataQuery {
    strapiPartnerPage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
    allStrapiLogoWallForPartners(
      sort: { fields: order, order: ASC }
      limit: 12
    ) {
      edges {
        node {
          logo {
            alt
            media {
              url
            }
          }
          id
        }
      }
    }
    allStrapiPartnerTypes {
      nodes {
        id
        name
        description
        link
      }
    }
  }
`

export default PartnerPage