import { serverClient } from "@/lib/trpc/server"

import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs"
import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"

import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"

interface Props extends Omit<BreadcrumbsProps, "breadcrumbs"> {
  subpageTitle?: string
}

export default async function Breadcrumbs({ subpageTitle, ...props }: Props) {
  const caller = await serverClient()
  const breadcrumbs = await caller.contentstack.breadcrumbs.get()
  if (!breadcrumbs?.length) {
    return null
  }

  if (subpageTitle) {
    breadcrumbs.push({ title: subpageTitle, uid: subpageTitle, href: "" })
  }

  const jsonSchema = generateBreadcrumbsSchema(breadcrumbs)

  return (
    <>
      <script
        type={jsonSchema.type}
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonSchema.jsonLd),
        }}
      />
      <BreadcrumbsComp breadcrumbs={breadcrumbs} {...props} />
    </>
  )
}
