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

import Breadcrumb from "./Breadcrumb"
import BreadcrumbsWithLink from "./BreadcrumbWithLink"

import styles from "./breadcrumbs.module.css"

type bool = {
  b?: Boolean
}
export default async function Breadcrumbs({ b = false }: bool) {
  let breadcrumbs
  if (!b)
    breadcrumbs = await serverClient().contentstack.breadcrumbs.getAccountPage()
  else
    breadcrumbs = await serverClient().contentstack.breadcrumbs.getLoyaltyPage()
  return (
    <nav className={styles.breadcrumbs}>
      <ul className={styles.list}>
        {breadcrumbs.map((breadcrumb) => {
          if (breadcrumb.href) {
            return (
              <BreadcrumbsWithLink key={breadcrumb.uid} href={breadcrumb.href}>
                {breadcrumb.title}
              </BreadcrumbsWithLink>
            )
          }

          return (
            <Breadcrumb key={breadcrumb.uid}>{breadcrumb.title}</Breadcrumb>
          )
        })}
      </ul>
    </nav>
  )
}