// frontend/components/journey/JourneyTable.tsx — 하단 작업 테이블 (원본 jtable)
import type { JourneyRow, JourneyPerson } from "@/lib/types";

const STAR_D = "M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18l-6 3.4 1.4-6.8L2.3 9.9l6.9-.8z";
const FALLBACK: Pick<JourneyPerson, "name" | "initial" | "color"> = {
  name: "",
  initial: "?",
  color: "var(--card-2)",
};

export function JourneyTable({ rows, people }: { rows: JourneyRow[]; people: JourneyPerson[] }) {
  const by = Object.fromEntries(people.map((p) => [p.id, p]));
  return (
    <table className="jtable">
      <thead>
        <tr>
          <th scope="col">작업</th>
          <th scope="col">상태</th>
          <th scope="col">시작</th>
          <th scope="col">담당</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((r) => {
          const pe = by[r.who] ?? FALLBACK;
          return (
            <tr key={r.node}>
              <td>
                <div className="t-subj">
                  <svg
                    className={"ic star" + (r.star ? " on" : "")}
                    viewBox="0 0 24 24"
                    fill={r.star ? "currentColor" : "none"}
                    stroke="currentColor"
                    strokeWidth="1.7"
                    aria-hidden
                  >
                    <path d={STAR_D} />
                  </svg>
                  <span className="nm">{r.title}</span>
                </div>
              </td>
              <td>
                <span className={"chip " + r.statusKey}>{r.statusLabel}</span>
              </td>
              <td>
                <span className="t-date">{r.startTime}</span>
              </td>
              <td>
                <div className="t-user">
                  <div className="ua" style={{ background: pe.color }}>
                    {pe.initial}
                  </div>
                  <span className="un">{pe.name}</span>
                </div>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}