import { PauseCircle } from 'lucide-react';
import AreaChip from '@/features/interventions/AreaChip';

/**
 * Top badges shown on every intervention detail page: a status pill plus the
 * focus-area chip. Blocking interventions read "Waiting to continue" (with a
 * pause icon); the rest read "Action required".
 */
const InterventionBadges = ({ intervention = {} }) => {
	const blocking =
		intervention.blocking === true ||
		intervention.blocking === 1 ||
		intervention.blocking === '1';

	return (
		<div className="flex flex-wrap items-center justify-center gap-3 mb-5">
			<span className="inline-flex items-center gap-1.5 rounded-full border border-amber-300 bg-amber-50 px-3 py-1 small-medium text-amber-700">
				{blocking ? (
					<>
						<PauseCircle className="w-3.5 h-3.5" />
						Waiting to continue
					</>
				) : (
					<>
						<span className="w-1.5 h-1.5 rounded-full bg-amber-500" />
						Action required
					</>
				)}
			</span>
			<AreaChip areaKey={intervention.task_area_id} />
		</div>
	);
};

export default InterventionBadges;