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

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

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

export default async function Breadcrumbs() {
  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()

  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>
  )
}