"use client";

import type { JobRowView } from "yt-dlp-transcript-common/views/jobRowView";
import { JobRow } from "./JobRow";

type Props = {
  jobs: JobRowView[];
  hideChannelSlug?: boolean;
  hideVideoId?: boolean;
};

// THE CARD LIST for a page's own jobs (channel, video, build, operation
// pages). /jobs draws the same JobRowView as a table row; both are ./JobRow.tsx,
// and both get their rows from the one builder (liveJobRows).
export function RunningJobsList({ jobs, hideChannelSlug, hideVideoId }: Props) {
  if (jobs.length === 0) return null;
  return (
    <section
      aria-label="Active jobs"
      className="flex flex-col gap-2 border border-border rounded-md p-3 bg-card"
    >
      <h2 className="text-sm font-medium text-muted-foreground">
        Active jobs
      </h2>
      <ul className="flex flex-col gap-2">
        {jobs.map((j) => (
          <JobRow
            key={j.id}
            job={j}
            variant="card"
            show={{ log: true }}
            hideChannelSlug={hideChannelSlug}
            hideVideoId={hideVideoId}
          />
        ))}
      </ul>
    </section>
  );
}