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

import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

export default async function Breadcrumbs() {
  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
  if (!breadcrumbs?.length) {
    return null
  }

  const homeBreadcrumb = breadcrumbs.shift()
  return (
    <nav className={styles.breadcrumbs}>
      <ul className={styles.list}>
        {homeBreadcrumb ? (
          <li className={styles.listItem}>
            <Link
              className={styles.homeLink}
              color="peach80"
              href={homeBreadcrumb.href!}
              variant="breadcrumb"
            >
              <HouseIcon color="peach80" />
            </Link>
            <ChevronRightIcon aria-hidden="true" color="peach80" />
          </li>
        ) : null}

        {breadcrumbs.map((breadcrumb) => {
          if (breadcrumb.href) {
            return (
              <li key={breadcrumb.uid} className={styles.listItem}>
                <Link
                  color="peach80"
                  href={breadcrumb.href}
                  variant="breadcrumb"
                >
                  {breadcrumb.title}
                </Link>
                <ChevronRightIcon aria-hidden="true" color="peach80" />
              </li>
            )
          }

          return (
            <li key={breadcrumb.uid} className={styles.listItem}>
              <Footnote color="burgundy" textTransform="bold">
                {breadcrumb.title}
              </Footnote>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}