import type { ReactNode } from "react";
import type { Kind } from "./status";
import { StatusChip } from "./status-chip";

// Map the severity kind to the row's visual class (stripe/bar color).
function rowClass(kind: Kind): string {
  if (kind === "attention") return "attention";
  if (kind === "verify" || kind === "done") return "verify";
  return "working";
}

export function JobRow({
  artist,
  album,
  kind,
  label,
  marker,
  meta,
  note,
  bar,
}: {
  artist: string;
  album: string;
  kind: Kind;
  label: string;
  marker?: string;
  meta?: ReactNode;
  note?: ReactNode;
  bar?: ReactNode;
}) {
  return (
    <article className={`job ${rowClass(kind)}`}>
      <div className="stripe" />
      <div>
        <h3 className="title">
          {marker ? <span className="nextup">{marker}</span> : null}
          {album} <span className="artist">· {artist}</span>
        </h3>
        {meta ? <div className="meta">{meta}</div> : null}
        {note ? <div className="note">{note}</div> : kind !== "attention" ? bar : null}
      </div>
      <StatusChip kind={kind} label={label} />
    </article>
  );
}