import React from "react";
import { Breadcrumbs as BaseBreadcrumbs } from "baseui/breadcrumbs";
import { StyledLink } from "baseui/link";

export interface BreadcrumbsProps {
  primaryCrumb: string;
  secondaryCrumb?: string;
  tertiaryCrumb?: string;
}

/**
 * This is the `<BreadCrumbs>` component <br />
 * Use to make the navigation path of the user visible
 */
const Breadcrumbs: React.FC<BreadcrumbsProps> = (
  props: React.PropsWithChildren<BreadcrumbsProps>
) => {
  const { primaryCrumb, secondaryCrumb, tertiaryCrumb } = props;
  return (
    <BaseBreadcrumbs {...props}>
      <StyledLink href="#">{primaryCrumb}</StyledLink>
      <StyledLink href="#">{secondaryCrumb}</StyledLink>
      <StyledLink href="#">{tertiaryCrumb}</StyledLink>
    </BaseBreadcrumbs>
  );
};

export default Breadcrumbs;