import { cx } from "class-variance-authority"
import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"

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

import Link from "@/components/TempDesignSystem/Link"

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

import type { BreadcrumbProps } from "./breadcrumbs"

export function Breadcrumb({
  className = "",
  href,
  children,
  ...props
}: BreadcrumbProps) {
  return (
    <AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
      {href ? (
        <>
          <Link color="peach80" href={href} variant="breadcrumb">
            {children}
          </Link>
          <MaterialIcon
            icon="chevron_right"
            size={20}
            aria-hidden="true"
            color="Icon/Interactive/Secondary"
          />
        </>
      ) : (
        children
      )}
    </AriaBreadcrumb>
  )
}
