Breadcrumb

"use client";
import { ChevronRight } from "lucide-react";

type State = "short" | "long";

const SHORT = ["Home", "Projects", "Frontend Lab"];
const LONG = [
"Home",
"Workspace",
"Studio",
"Projects",
"2026",
"Frontend Lab",
"Pattern PA01",
];

export function Breadcrumb({ state = "short" }: { state?: State }) {
const items = state === "long" ? LONG : SHORT;
const display: (string | "…")[] =
  items.length > 4
    ? [items[0], "…", items[items.length - 2], items[items.length - 1]]
    : items;

return (
  <nav className="w-full max-w-md">
    <ol className="flex items-center gap-1 flex-wrap font-mono text-xs">
      {display.map((it, i) => {
        const isLast = i === display.length - 1;
        return (
          <li key={i} className="flex items-center gap-1">
            {it === "…" ? (
              <span className="text-muted-foreground/60">…</span>
            ) : isLast ? (
              <span className="text-foreground">{it}</span>
            ) : (
              <a href="#" className="text-muted-foreground hover:text-lab-accent">
                {it}
              </a>
            )}
            {!isLast && <ChevronRight className="h-3 w-3 text-muted-foreground/40" />}
          </li>
        );
      })}
    </ol>
    {state === "long" && (
      <p className="mt-3 font-mono text-[10px] text-muted-foreground/60">
        ▸ 7 層被收摺成 4 個顯示節點
      </p>
    )}
  </nav>
);
}