import { LaneSegment, type TrainJob } from './LaneSegment'

export interface LaneBarProps {
  jobs: TrainJob[]
  jobsComplete: boolean
}

export function LaneBar({ jobs, jobsComplete }: LaneBarProps) {
  return (
    <div>
      {!jobsComplete && (
        <p role="status" className="mb-1 text-xs font-semibold text-warning">
          jobs incomplete
        </p>
      )}
      {jobs.length === 0 ? (
        <p className="text-xs text-fg-muted">No gate jobs</p>
      ) : (
        <div className="flex min-h-6 gap-px" aria-label="Gate jobs">
          {jobs.map((job) => (
            <LaneSegment key={job.id} job={job} jobsComplete={jobsComplete} />
          ))}
        </div>
      )}
    </div>
  )
}