import * as React from "react"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { HeaderBar } from "@/components/header-bar/simpale-detail-header-bar"
import RelatedCards from "@/components/related-cards"
import NotFoundPage from "@/pages/404"
import DetailContent from "@/components/detail/content"
import LinkModule from "@/components/link-module"
import t from "@/constants/wording"
import MarkdownToText from "@/components/markdown-to-text"

type IProps = {
  pageContext: { jointSolution: JointSolution }
  location: Location
  myLocation: ILocation
}

const JointSolutionPage: React.FC<IProps> = ({ pageContext, location, myLocation }) => {
  const { jointSolution } = pageContext
  if (!jointSolution) return <NotFoundPage />

  const { title, body, relatedJointSolutions = [] } = jointSolution

  const jointSolutionsFormat: RelatedCard[] = relatedJointSolutions.map(
    item => item.jointSolution
  )

  const seoProps = {
    title,
    description: MarkdownToText(body, 150),
    keywords: t("keywords"),
  }

  return (
    <Layout>
      <Seo {...seoProps} />
      <HeaderBar {...jointSolution} />
      <DetailContent
        {...jointSolution}
        {...location}
        logo={jointSolution.jointCompanyLogo}
        myLocation={myLocation}
      />
      <RelatedCards
        styleName="left"
        type="joinSolution"
        cards={jointSolutionsFormat}
        title={<h2>相关联合解决方案</h2>}
        footer={
          <LinkModule to={"/joint-solution"}>查看全部联合解决方案</LinkModule>
        }
      />
    </Layout>
  )
}

export default JointSolutionPage