import { PageCategoryContent } from '@/lib/types'

import GlossaryFaqLayout from '@/components/sections/GlossaryFaqLayout'
import GlossaryRightPanel from '@/components/sections/GlossaryFaqRightPanel'
import GlossaryIndex from '@/components/blocks/GlossaryIndex'

type Props = {
  page: {
    title: string
    content: string
    featuredImage?: {
      node: {
        url: string
        alt: string
        placeholder: string
      }
    } | null
    pageCategoryContent: PageCategoryContent
  }
}

export default function Glossary({ page }: Props) {
  const { content, pageCategoryContent } = page
  const pageCategories = pageCategoryContent.pageCategories.map(pageCategory => pageCategory.categoryContent)
  const index = <GlossaryIndex pageCategories={pageCategories} />

  return (
    <GlossaryFaqLayout
      page={page as any}
      index={index}
      mainContent={<GlossaryRightPanel content={content} index={index} pageCategories={pageCategories} />}
    />
  )
}