import { forwardRef, memo } from "react";

import { SubCrumbListItem, SubCrumbLink } from "../breadcrumbs.styled";
import { BaseCrumb } from "./base-crumb";

import type { CrumbProps } from "./crumb-props";

const SubCrumbComponent = forwardRef<HTMLAnchorElement, Omit<CrumbProps, "divider">>(
  (props, ref) => {
    return (
      <SubCrumbListItem>
        <SubCrumbLink asChild>
          <BaseCrumb ref={ref} ellipsis={false} {...props} />
        </SubCrumbLink>
      </SubCrumbListItem>
    );
  }
);

SubCrumbComponent.displayName = "SubCrumb";

export const SubCrumb = memo(SubCrumbComponent);