import { _ } from "@/lib/translation"
import { serverClient } from "@/lib/trpc/server"
import { PageTypes } from "@/server/routers/contentstack/breadcrumbs/input"

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

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

import { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"

export default async function Breadcrumbs({
  pageType = PageTypes.Account,
}: BreadcrumbsProps) {
  let breadcrumbs
  if (pageType == PageTypes.Account) {
    breadcrumbs = await serverClient().contentstack.breadcrumbs.getMyPages()
  } 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>
  )
}