import { JobListItem, type JobListItemProps } from "@/components/JobListItem"
import { cn } from "@/lib/utils"

export interface JobListProps {
  jobs: JobListItemProps[]
  emptyLabel?: string
  className?: string
}

export function JobList({ jobs, emptyLabel = "No running jobs.", className }: JobListProps) {
  if (jobs.length === 0) {
    return (
      <div className={cn("flex flex-col gap-2", className)}>
        <p className="my-4 text-sm text-center text-muted-foreground">{emptyLabel ?? 'No jobs.'}</p>
      </div>
    )
  }

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      {jobs.map((job, index) => (
        <JobListItem key={index} {...job} />
      ))}
    </div>
  )
}