/**
 * UsageBadge - Small inline usage indicator
 *
 * Shows usage quota in format: (used/limit)
 * Color-coded: green (ok), yellow (warning), red (exceeded)
 *
 * Phase 3: Frontend Display
 */
import './UsageBadge.css'

export default function UsageBadge({ used, limit, remaining, allowed }) {
  // Don't show badge if unlimited
  if (limit === null || limit === undefined) {
    return null
  }

  // Determine status for color coding
  let status = 'ok'
  if (!allowed || remaining < 0) {
    status = 'exceeded'
  } else if (limit > 0 && remaining <= Math.ceil(limit * 0.2)) {
    // Warning at 20% or less remaining
    status = 'warning'
  }

  return (
    <span className={`usage-badge usage-badge--${status}`}>
      ({used}/{limit})
    </span>
  )
}