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

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

type Props = {
  page: {
    title: string
    content: string
    featuredImage?: {
      node: {
        imageUrl: string
        alt: string
        placeholder: string
      }
    } | null
    customResourcesSection: {
      resourcesSection: {
        sectionTitle: string
        sectionDescription: string
        resources: any
      }
    }
    pageCategoryContent: PageCategoryContent
    customCtaSection: {
      ctaText: string
      ctaLink: {
        title: string
        url: string
      }
      enableCta: any
    }
  }
}

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

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