import styles from "./PendingQueueBar.module.css";

interface PendingQueueBarProps {
	steering: string[];
	followUp: string[];
}

export function PendingQueueBar({ steering, followUp }: PendingQueueBarProps) {
	if (steering.length === 0 && followUp.length === 0) return null;

	return (
		<div className={styles.pendingBar}>
			{steering.length > 0 ? (
				<div className={styles.queueGroup}>
					<span className={styles.queueLabel}>Steering</span>
					{steering.map((item, i) => (
						<div key={`steer-${i}`} className={styles.queueItem}>
							{item}
						</div>
					))}
				</div>
			) : null}
			{followUp.length > 0 ? (
				<div className={styles.queueGroup}>
					<span className={styles.queueLabel}>Follow-up</span>
					{followUp.map((item, i) => (
						<div key={`follow-${i}`} className={styles.queueItem}>
							{item}
						</div>
					))}
				</div>
			) : null}
		</div>
	);
}
