← snapshot

import type { DecisionDto } from "@/lib/types";
import { FamilyTag } from "./family-tag";
import { IdChip } from "./id-chip";
import { ActorBadge } from "./provenance-badge";
import { Time } from "./time";

/**
 * A decision on the board. The 3px selvage carries the proposer's color —
 * indigo for agent-drafted, gold for human-proposed — so the board reads
 * at a glance.
 */
export function DecisionCard({
  decision,
  repo,
}: {
  decision: DecisionDto;
  repo: string;
}) {
  const humanProposed = decision.proposed_by.kind === "human";
  return (
    <article
      className={`jac-decision-card${humanProposed ? " jac-decision-card--human" : ""}`}
    >
      <h3 className="jac-decision-title">
        <a href={`/repos/${repo}/decisions/${decision.id}`}>{decision.title}</a>
      </h3>
      <div className="jac-meta-row">
        <IdChip id={decision.id} kind="dec" href={`/repos/${repo}/decisions/${decision.id}`} />
        {decision.state === "unsettled" ? (
          <span className="jac-tag jac-tag--warn">unsettled — waiting on a human</span>
        ) : (
          <span className="jac-tag">settled</span>
        )}
        {decision.families.map((f) => (
          <FamilyTag key={f} family={f} />
        ))}
      </div>
      <div className="jac-meta-row">
        <span className="jac-small">proposed by</span>
        <ActorBadge actor={decision.proposed_by} />
        <span className="jac-small">governs</span>
        {decision.scope.length === 0 ? (
          <span className="jac-small">nothing — an empty scope, honestly</span>
        ) : (
          decision.scope.map((p) => (
            <span key={p} className="jac-pill">
              {p}
            </span>
          ))
        )}
        <Time at={decision.at} />
      </div>
    </article>
  );
}