// frontend/components/journey/PeopleStack.tsx — 협업 아바타 스택 (원본 jx-stack)
import type { JourneyPerson } from "@/lib/types";

export function PeopleStack({
  people,
  more,
  hover,
}: {
  people: JourneyPerson[];
  more: string;
  hover?: string | null;
}) {
  return (
    <div className="jx-stack">
      {people.map((p) => (
        <button
          key={p.id}
          className={"av" + (hover === p.id ? " on" : "")}
          style={{ background: p.color }}
          title={`${p.name} · ${p.role}`}
          type="button"
        >
          {p.initial}
          <span className={"cnt " + (p.me ? "me" : "tm")}>{p.tasks}</span>
        </button>
      ))}
      <div className="more">{more}</div>
    </div>
  );
}