ari_assistant/frontend/components/inbox/RouteChips.tsx

// frontend/components/inbox/RouteChips.tsx
"use client";
import { Icon } from "@/components/Icon";
import { SPHERE, TYPE_ICON, TYPE_LABEL } from "@/lib/inbox/presentation";
import type { Classification } from "@/lib/types";

export default function RouteChips({
  r,
  editable,
  onReType,
}: {
  r: Classification;
  editable: boolean;
  onReType: () => void;
}) {
  return (
    <div className="sb-route">
      <span className="r-arrow">
        <Icon name="arrow" />
      </span>

      {/* 타입 칩: 클릭 시 다르게 분류(편집 가능할 때만) */}
      <button
        className={"r-chip type " + r.type}
        onClick={() => editable && onReType()}
        disabled={!editable}
        aria-label={`타입: ${TYPE_LABEL[r.type]}${editable ? " (눌러서 변경)" : ""}`}
      >
        <Icon name={TYPE_ICON[r.type]} />
        {TYPE_LABEL[r.type]}
      </button>

      {/* sphere 칩 (고정색) */}
      <span className="r-chip sphere">
        <span className="pdot" style={{ background: SPHERE[r.sphere].tone }} />
        {SPHERE[r.sphere].label}
      </span>

      {/* proj 칩 (동적 tone) */}
      <span className="r-chip proj">
        <span className="pdot" style={{ background: `var(--${r.tone})` }} />
        {r.proj_label}
      </span>

      {r.due_text && (
        <span className="r-chip">
          <Icon name="cal" />
          {r.due_text}
        </span>
      )}
      {r.when_text && (
        <span className="r-chip">
          <Icon name="clock" />
          {r.when_text}
        </span>
      )}
      {r.extra && (
        <span className="r-chip auto">
          <Icon name="zap" />
          {r.extra}
        </span>
      )}
    </div>
  );
}