shinkan-jinkendo/frontend/src/components/FeatureUsageBadge.jsx

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, error, getFeature } = useEntitlements()
  const feat = getFeature(featureId)

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

  if (!feat) {
    if (error) {
      return (
        <span
          className="feature-usage-badge muted"
          style={{ fontSize: '0.8rem', color: 'var(--text3)' }}
          title={error}
        >
          {label}: —
        </span>
      )
    }
    return null
  }

  const { used = 0, limit, remaining, allowed } = feat
  // limit === 0 (z. B. Free-Plan ai_calls) anzeigen; nur echtes Unbegrenzt (null) ausblenden
  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>
  )
}