import Breadcrumbs from "components/breadcrumbs";
import Logo from "components/Logo";
import classNames from "classnames";

type ArticleBreadcumbsProps = {
  emphasis?: "high" | "low";
  children?: string[];
  className?: string;
};

export function ArticleBreadcumbs({
  children,
  emphasis = "high",
  className, //Emphasis high uses when we display article page
}: ArticleBreadcumbsProps) {
  return (
    <Breadcrumbs
      divider="slash"
      className={classNames(
        "text-sm leading-4 text-gray-700 flex flex-row items-center",
        {
          "last:text-gray-900": emphasis === "high",
        },
        className,
      )}
    >
      {emphasis === "high" ? <Logo className="w-4" fillColors="gray" /> : null}
      {children}
    </Breadcrumbs>
  );
}

ArticleBreadcumbs.displayName = "ArticleBreadcumbs";
