"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";

interface AnalysisBreadcrumbProps {
  cadNum: string;
}

export function AnalysisBreadcrumb({ cadNum }: AnalysisBreadcrumbProps) {
  return (
    <nav
      aria-label="Breadcrumb"
      style={{
        display: "flex",
        alignItems: "center",
        gap: 4,
        flexWrap: "wrap",
        minWidth: 0,
        flex: 1,
      }}
    >
      {/* SiteFinder root */}
      <Link
        href="/site-finder"
        style={{
          fontSize: 13,
          color: "var(--fg-secondary)",
          textDecoration: "none",
          whiteSpace: "nowrap",
        }}
      >
        SiteFinder
      </Link>

      <ChevronRight
        size={14}
        strokeWidth={1.5}
        style={{ color: "var(--fg-tertiary)", flexShrink: 0 }}
        aria-hidden
      />

      {/* Cad number */}
      <Link
        href={`/site-finder?selected=${encodeURIComponent(cadNum)}`}
        style={{
          fontSize: 13,
          color: "var(--fg-secondary)",
          textDecoration: "none",
          fontVariantNumeric: "tabular-nums",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
          maxWidth: 260,
        }}
        title={cadNum}
      >
        {cadNum}
      </Link>

      <ChevronRight
        size={14}
        strokeWidth={1.5}
        style={{ color: "var(--fg-tertiary)", flexShrink: 0 }}
        aria-hidden
      />

      {/* Current page */}
      <span
        aria-current="page"
        style={{
          fontSize: 13,
          fontWeight: 600,
          color: "var(--fg-primary)",
          whiteSpace: "nowrap",
        }}
      >
        Анализ
      </span>
    </nav>
  );
}