import { Fragment } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

import { focusRing } from "../lib/focus-ring";
import { useBreadcrumbTrail } from "./breadcrumb-context";

export function Breadcrumb() {
  const { t } = useTranslation();
  const trail = useBreadcrumbTrail();
  if (trail.length === 0) return <div className="min-w-0 flex-1" />;
  return (
    <nav aria-label={t("nav.breadcrumb")} className="flex min-w-0 flex-1 items-center gap-1 text-sm">
      {trail.map((item, i) => {
        const last = i === trail.length - 1;
        return (
          <Fragment key={`${item.label}-${i}`}>
            {i > 0 && <span className="text-muted-foreground">/</span>}
            {item.to && !last ? (
              <Link
                to={item.to}
                className={`truncate rounded-sm text-muted-foreground hover:text-foreground ${focusRing}`}
              >
                {item.label}
              </Link>
            ) : (
              <span className={last ? "truncate text-foreground" : "truncate text-muted-foreground"}>
                {item.label}
              </span>
            )}
          </Fragment>
        );
      })}
    </nav>
  );
}
