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

import { Layout, Seo } from "@/components"
import ProductBanner from "@/components/product/banner"
import EnterpriseDescription from "@/components/product/enterprise-description"
import t from "@/constants/wording"

interface IProps {
  location: ILocation
}

const ProductEnterprise: React.FC<IProps> = ({ location }) => {
  const data = useStaticQuery<StrapiProductImage>(graphql`
    query StrapiProductEnterpriseQuery {
      strapiProductPage {
        enterpriseBg {
          media {
            url
            width
            height
          }
        }
      }
    }
  `)

  const bannerBg = data.strapiProductPage.enterpriseBg

  return (
    <Layout>
      <Seo
        title={t("PingCAP Enterprise subscription")}
        description={t("PingCAP Enterprise subscription")}
        keywords={t("keywords")}
      />
      <ProductBanner
        bannerBg={bannerBg}
        text={t("PingCAP Enterprise subscription")}
        isSmall={true}
      />
      <EnterpriseDescription location={location} />
    </Layout>
  )
}

export default ProductEnterprise