import { useEntitlements } from '../context/EntitlementsContext'

/**
 * Zeigt Vereins-Kontingent für ein Feature (M4 UsageBadge).
 * Unbegrenzt (limit null) → nichts rendern.
 */
export default function FeatureUsageBadge({ featureId = 'ai_calls', label = 'KI-Kontingent' }) {
  const { entitlements, loading, getFeature } = useEntitlements()
  const feat = getFeature(featureId)

  if (loading && !feat) {
    return (
      <span className="feature-usage-badge muted" style={{ fontSize: '0.8rem' }}>
        {label}: …
      </span>
    )
  }

  if (!feat) return null

  const { used = 0, limit, remaining, allowed } = feat
  if (limit == null) return null

  const tone = !allowed || remaining === 0 ? 'var(--danger)' : 'var(--text2)'

  return (
    <span
      className="feature-usage-badge"
      style={{ fontSize: '0.8rem', color: tone }}
      title={
        entitlements?.plan_id
          ? `Plan: ${entitlements.plan_id}`
          : undefined
      }
    >
      {label}: {used}/{limit}
      {remaining != null ? ` (${remaining} übrig)` : ''}
    </span>
  )
}