import { gateTitleById } from './GateSelect.jsx'

export function GateGraphStateBadge({ graphState, itemId, siblingItems = [] }) {
  if (!graphState?.items?.[itemId]) return null

  if (graphState.graph_profile?.enforce_gate_blocking === false) {
    return null
  }

  const { blocked, ready, blocked_by: blockedBy = [] } = graphState.items[itemId]

  if (ready) {
    return <span className="status-pill status-pill--ready">Bereit</span>
  }

  if (blocked) {
    const blockerTitle =
      blockedBy.length === 1 ? gateTitleById(siblingItems, blockedBy[0]) : null
    const title =
      blockerTitle != null
        ? `Blockiert durch ${blockerTitle}`
        : `Blockiert (${blockedBy.length} Voraussetzungen)`
    return (
      <span className="status-pill status-pill--blocked" title={title}>
        Blockiert
      </span>
    )
  }

  return null
}