← snapshot

import type { SnapshotDto } from "@/lib/types";
import { IdChip } from "./id-chip";
import { ActorBadge, ProvenanceBadge } from "./provenance-badge";
import { Time } from "./time";

/** The only way a snapshot is listed anywhere: id, provenance, hands, message. */
export function SnapshotRow({
  snapshot,
  repo,
  refs,
}: {
  snapshot: SnapshotDto;
  repo: string;
  /** Ref names whose head is this snapshot, shown as pills. */
  refs?: string[];
}) {
  return (
    <li className="jac-row">
      <IdChip id={snapshot.id} kind="snap" href={`/repos/${repo}/snapshots/${snapshot.id}`} />
      <ProvenanceBadge provenance={snapshot.provenance} />
      <span className="jac-row-message" title={snapshot.message}>
        {snapshot.message}
      </span>
      {refs?.map((name) => (
        <span key={name} className="jac-pill">
          {name}
        </span>
      ))}
      <ActorBadge actor={snapshot.author} />
      <Time at={snapshot.at} />
    </li>
  );
}