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 Pick<BreadcrumbsProps, "color" | "size"> {
  subpageTitle?: string
}

export default async function Breadcrumbs({
  color,
  size,
  subpageTitle,
}: 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} color={color} size={size} />
    </>
  )
}