export function TransitionErrorBanner({
  controlId,
  violations,
  onDismiss,
}: {
  controlId: string
  violations: string[]
  onDismiss: () => void
}) {
  return (
    <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
          <div>
            <h4 className="font-medium text-orange-800">Status-Transition blockiert ({controlId})</h4>
            <ul className="mt-2 space-y-1">
              {violations.map((v, i) => (
                <li key={i} className="text-sm text-orange-700 flex items-start gap-2">
                  <span className="text-orange-400 mt-0.5">•</span>
                  <span>{v}</span>
                </li>
              ))}
            </ul>
            <a href="/sdk/evidence" className="mt-2 inline-block text-sm text-purple-600 hover:text-purple-700 font-medium">
              Evidence hinzufuegen →
            </a>
          </div>
        </div>
        <button onClick={onDismiss} className="text-orange-400 hover:text-orange-600 ml-4">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  )
}