import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

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}
            >
              <MaterialIcon icon="home" size={16} color="CurrentColor" />
            </Link>
            <MaterialIcon
              icon="chevron_right"
              size={20}
              aria-hidden="true"
              color="Icon/Interactive/Secondary"
            />
          </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>
                <MaterialIcon
                  icon="chevron_right"
                  size={20}
                  aria-hidden="true"
                  color="Icon/Interactive/Secondary"
                />
              </li>
            )
          }

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