import { cx } from "class-variance-authority"
import NextLink from "next/link"
import {
  Breadcrumb as BreadcrumbRAC,
  type BreadcrumbProps as BreadcrumbRACProps,
} from "react-aria-components"

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

import { PropsWithChildren } from "react"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { Typography } from "../../Typography"

interface BreadcrumbProps extends PropsWithChildren<BreadcrumbRACProps> {
  className?: string
  href?: string
}

export function Breadcrumb({
  className = "",
  href,
  children,
  ...props
}: BreadcrumbProps) {
  return (
    <BreadcrumbRAC className={cx(styles.breadcrumb, className)} {...props}>
      {href ? (
        <>
          <Typography variant="Label/xsRegular">
            <NextLink className={styles.link} href={href}>
              {children}
            </NextLink>
          </Typography>
          <MaterialIcon
            icon="chevron_right"
            size={20}
            aria-hidden="true"
            color="CurrentColor"
            className={styles.icon}
          />
        </>
      ) : (
        children
      )}
    </BreadcrumbRAC>
  )
}