import * as React from "react"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { BestPracticeHeader } from "@/components/practice/best-practice-header"
import NotFoundPage from "@/pages/404"
import BestPracticeRelatedCard from "@/components/practice/best-practice-related"
import DetailContent from "@/components/detail/content"
import t from "@/constants/wording"

type IProps = {
  pageContext: { bestPracticeDetail: RelatedBestPractices & PracticeType }
  location: Location
  myLocation: ILocation
}

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

  const {
    title,
    description,
    keywords,
    tags,
    relatedBestPractices = [],
  } = bestPracticeDetail

  const relatedBestPracticesFormat: PracticeType[] = relatedBestPractices.map(
    item => item.bestPractice
  )

  const seoProps = {
    title,
    description: description || t("TiDB best practices"),
    keywords: Array.from(new Set([...[keywords || []], ...[tags || []]])).join(
      "、"
    ),
  }

  return (
    <Layout>
      <Seo {...seoProps} />
      <BestPracticeHeader {...bestPracticeDetail} />
      <DetailContent {...bestPracticeDetail} {...location} myLocation={myLocation} />
      <BestPracticeRelatedCard list={relatedBestPracticesFormat} />
    </Layout>
  )
}

export default BestPracticeDetail