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

import { Layout, Seo } from "@/components"
import ProductBanner from "@/components/product/banner"
import PartnerIntroduce from "@/components/partner/partner-introduce"
import PartnerRights from "@/components/partner/partner-rights"
import CooperationFlow from "@/components/education/cooperation-flow"
import PartnerLogoWall from "@/components/partner/partner-logo-wall"
import BecomePartner from "@/components/partner/become-partner"
import t from "@/constants/wording"
import {
  INTRODUCE,
  PARTNER_RIGHTS,
  COOPERATION_FLOW,
  BECOME_PARTNER,
} from "@/constants/solution-partner"

interface IProps {
  location: ILocation
}

const SolutionPartner: React.FC<IProps> = ({ location }) => {
  const data = useStaticQuery<SolutionPartnerQuery>(graphql`
    query StrapiSolutionPartnerQuery {
      allStrapiLogoWallForSolutionPartners(
        limit: 6
        sort: { fields: order, order: ASC }
      ) {
        nodes {
          id
          logo {
            alt
            media {
              url
            }
          }
        }
      }
    }
  `)

  const logoWallData = data.allStrapiLogoWallForSolutionPartners.nodes || []

  return (
    <div className="solution-partner">
      <Layout>
        <Seo
          title={t("solution-partner")}
          description={t("For independent software developers")}
          keywords={t("keywords")}
        />
        <ProductBanner className="partnerBanner" text={t("solution-partner")} />
        <PartnerIntroduce text={INTRODUCE} />
        <PartnerRights content={PARTNER_RIGHTS} />
        <CooperationFlow cooperationFlow={COOPERATION_FLOW} />
        <PartnerLogoWall data={logoWallData} />
        <BecomePartner text={BECOME_PARTNER} location={location} />
      </Layout>
    </div>
  )
}

export default SolutionPartner