/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import Link from "next/link";
import { Tooltip } from "@plane/propel/tooltip";

type Props = {
  label?: string;
  href?: string;
  icon?: React.ReactNode | undefined;
  isCurrent?: boolean;
};

export function BreadcrumbLink(props: Props) {
  const { href, label, icon, isCurrent = false } = props;

  const content = (
    <>
      {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
      <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
    </>
  );

  return (
    <Tooltip tooltipContent={label} position="bottom">
      <li className="flex items-center" tabIndex={-1}>
        {href && !isCurrent ? (
          <Link className="nodedc-admin-breadcrumb-pill flex items-center gap-1.5 text-13 font-medium" href={href}>
            {content}
          </Link>
        ) : (
          <div
            className="nodedc-admin-breadcrumb-pill flex cursor-default items-center gap-1.5 text-13 font-medium"
            data-current={isCurrent}
            aria-current={isCurrent ? "page" : undefined}
          >
            {content}
          </div>
        )}
      </li>
    </Tooltip>
  );
}