web/components/TempDesignSystem/Breadcrumbs/index.tsx

import { HouseIcon } from "@/components/Icons"
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

import { breadcrumbsVariants } from "./variants"

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

import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"

export default function Breadcrumbs({
  breadcrumbs,
  variant,
}: BreadcrumbsProps) {
  if (!breadcrumbs?.length) {
    return null
  }

  const classNames = breadcrumbsVariants({
    variant,
  })

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

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

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