import React from "react"

import Seo from "@/components/seo"
import { Layout } from "@/components"
import BlogHeader from "./blog-header"
import BlogList from "./blog-list"
import t from "@/constants/wording"
import * as styles from "./blog.module.scss"

type IProps = {
  pageContext: {
    allBlogsCount: number
    blogs: Blog[]
    blogCategories: {
      name: string
    }[]
    blogRecommend: { blog: Blog }[]
    blogMostPopular: { blog: Blog }[]
    allTags: { count: number; name: string }[]
    hotTags: { count: number; name: string }[]
    category?: { name: string }
    tag?: { count: number; name: string }
  }
}

const Blog: React.FC<IProps> = ({ pageContext }) => {
  const {
    allBlogsCount,
    blogs,
    blogCategories,
    blogRecommend,
    blogMostPopular,
    allTags,
    hotTags,
    category,
    tag,
  } = pageContext

  const title = tag !== undefined ? tag.name : "博客"

  return (
    <Layout>
      <Seo
        title={title}
        description="为了帮助大家更好的理解 TiDB 的技术细节并参与到项目贡献中来，我们准备了包含「 TiDB 源码阅读」、「TiKV 源码解析」、「十分钟成为 contributor」等一系列技术详解文章，enjoy~"
        keywords={t("keywords")}
      />
      <BlogHeader needReturn={false}>
        <h1 className={styles.h1}>{t("blog")}</h1>
      </BlogHeader>
      <BlogList
        allBlogsCount={allBlogsCount}
        data={blogs}
        categories={blogCategories}
        blogRecommend={blogRecommend}
        blogMostPopular={blogMostPopular}
        allTags={allTags}
        hotTags={hotTags}
        category={category}
        tag={tag}
      />
    </Layout>
  )
}

export default Blog