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/distribution-partner"

interface IProps {
  location: ILocation
}

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

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

  return (
    <div className="distribution-partner">
      <Layout>
        <Seo
          title={t("authorized-distribution-partner")}
          description={t(
            "Authorized distribution partners for distributors, integrators, etc."
          )}
          keywords={t("keywords")}
        />
        <ProductBanner
          className="partnerBanner"
          text={t("authorized-distribution-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 DistributionPartner