import "./style.pcss";
import type {
  ReactElement,
  FC,
} from "react";
import {
  useMemo,
} from "react";
import type { IBreadcrumbs } from "./config/types";
import { BreadcrumbsContext } from "./context";
import { BreadcrumbsItem } from "./ui/BreadcrumbsItem";
import type { IComponentBaseProps } from "../../types/components";
import { useCN } from "../../utils/react/useCN";

/**
 * Компонент хлебных крошек
 * @returns {ReactElement}
 */
const Breadcrumbs: FC<IBreadcrumbs & IComponentBaseProps> = ({
  baseClass = "breadcrumbs",
  extraClasses = {},
  extraAttrs = {},
  utilClasses = [],
  items = [],
}): ReactElement => {
  const { getCN } = useCN(baseClass);
  const ctxValue = useMemo(() => ({
    getCN,
  }), [ getCN ]);

  return (
    <BreadcrumbsContext value={ctxValue}>
      <nav
        className={getCN("", extraClasses, utilClasses)}
        {...extraAttrs}
        aria-label={"Breadcrumb"}>
        <ul
          className={getCN("list")}
          itemScope
          itemType={"https://schema.org/BreadcrumbList"}
        >
          {items.map((props, i) => {
            return (
              <BreadcrumbsItem
                key={props.href}
                position={i + 1}
                isCurrent={items.length === i + 1}
                {...props}
              />
            );
          })}
        </ul>
      </nav>
    </BreadcrumbsContext>
  );
};

export type {
  IBreadcrumbs,
};

export {
  Breadcrumbs,
};