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

import Seo from "@/components/seo"
import { Layout, Banner, LearnMoreSection, CustomLink } from "@/components"
import { LEARN_MORE_INSIGHT_SECTION } from "@/constants/case"
import t from "@/constants/wording"
import AllInsightArticle from "@/components/insight/all-insight-article"
import RelatedCards from "@/components/related-cards"
import LinkModule from "@/components/link-module"

const InsightPage: React.FC<PageProps<FetchSupportDataQuery>> = ({ data }) => {
  // todo: Yixing - add seo data
  const {
    strapiInsightPage: { homeBanner },
    allStrapiInsightCases: { edges },
  } = data

  const relatedCasesFormat: RelatedCard[] = edges.map(
    item => item.node.customerCase
  )

  return (
    <Layout>
      <Seo
        title={t("Insight")}
        description={t("Industry insight reports")}
        keywords={t("keywords")}
      />
      <Banner
        image={homeBanner}
        title={t("insight page banner title")}
        subtitle={t("insight page banner subtitle")}
        attrs={{ style: { maxWidth: "27rem" } }}
      >
        <CustomLink
          className="button is-white is-medium"
          linkTo={"/contact/"}
        >
          {t("media cooperation")}
        </CustomLink>
      </Banner>
      <AllInsightArticle />
      <RelatedCards
        type="case"
        cards={relatedCasesFormat}
        title={<h1>相关客户案例</h1>}
        footer={<LinkModule to={"/case"}>查看全部案例</LinkModule>}
      />
      <LearnMoreSection
        data={LEARN_MORE_INSIGHT_SECTION}
        className="has-background-white"
      />
    </Layout>
  )
}

export const data = graphql`
  query FetchInsightDataQuery {
    strapiInsightPage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
    allStrapiInsightCases {
      edges {
        node {
          customerCase {
            id
            title
            description
            logo {
              id
              alt
              media {
                id
                url
              }
            }
          }
        }
      }
    }
  }
`

export default InsightPage