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

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

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 ? (
        <>
          <Typography variant="Label/xsRegular">
            <Link className={styles.link} href={href}>
              {children}
            </Link>
          </Typography>
          <MaterialIcon
            icon="chevron_right"
            size={20}
            aria-hidden="true"
            color="Icon/Interactive/Secondary"
          />
        </>
      ) : (
        children
      )}
    </AriaBreadcrumb>
  )
}