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

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

export function BreadcrumbSkeleton({
  children,
  isLastBreadcrumb,
}: React.PropsWithChildren<{ isLastBreadcrumb?: boolean }>) {
  return (
    <li className={styles.breadcrumb}>
      <Typography variant="Label/xsRegular">
        <span className={styles.link}>{children}</span>
      </Typography>

      {!isLastBreadcrumb ? (
        <MaterialIcon
          icon="chevron_right"
          size={20}
          aria-hidden="true"
          color="CurrentColor"
          className={styles.icon}
        />
      ) : null}
    </li>
  )
}