import type { FC, ReactElement } from "react";
import { useContext } from "react";
import { BreadcrumbsLink } from "./BreadcrumbsLink";
import type { IBreadcrumbsItem } from "../config/types";
import { BreadcrumbsContext } from "../context";

/**
 * Компонент отдельного элемента хлебных крошек
 * @returns {ReactElement}
 */
export const BreadcrumbsItem: FC<IBreadcrumbsItem> = ({
  isCurrent = false,
  href = "",
  labelSlot = null,
  position = 1,
}): ReactElement => {
  const { getCN } = useContext(BreadcrumbsContext);

  return (
    <li
      className={getCN("item")}
      itemProp={"itemListElement"}
      itemScope
      itemType={"https://schema.org/ListItem"}
    >
      <meta
        itemProp={"position"}
        content={String(position)}
      />
      <BreadcrumbsLink
        isCurrent={isCurrent}
        href={href}
        labelSlot={labelSlot}
      />
    </li>
  );
};