import * as React from "react"
import Layout from "@/components/layout"
import Seo from "@/components/seo"
import FreeExperience from "@/components/free-experience"
import { HeaderBar } from "@/components/header-bar/solution-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"

type IProps = {
  pageContext: { solutionDetail: SolutionDetail }
  location: Location
  myLocation: ILocation
}

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

  const { title, description, keyWords, relatedCases = [] } = solutionDetail

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

  const seoProps = {
    title,
    description: description || t("Solution Detail"),
    keywords: keyWords?.join(",")
  }

  return (
    <Layout>
      <Seo {...seoProps} />
      <HeaderBar solutionDetail={solutionDetail} location={location} />
      <DetailContent {...solutionDetail} {...location} myLocation={myLocation} />
      <RelatedCards
        styleName="left"
        type="case"
        cards={relatedCasesFormat}
        title={<h2>相关客户案例</h2>}
        footer={<LinkModule to={"/case"}>查看全部案例</LinkModule>}
      />
      <FreeExperience />
    </Layout>
  )
}

export default SolutionDetailPage