'use client'

import { type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '@/lib/utils'

/**
 * Forge Badge / Pill — implements DESIGN.md §4.Badge
 */

export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error'

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone?: BadgeTone
  icon?: ReactNode
}

const toneClasses: Record<BadgeTone, string> = {
  neutral: 'bg-surface-3 text-ink-muted',
  info:    'bg-primary-subtle text-brand-primary',
  success: 'bg-accent-success/15 text-accent-success',
  warning: 'bg-accent-warning/15 text-accent-warning',
  error:   'bg-accent-danger/15 text-accent-danger',
}

export function Badge({ tone = 'neutral', icon, className, children, ...rest }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 h-5 px-2 rounded text-[11px] font-medium',
        toneClasses[tone],
        className,
      )}
      {...rest}
    >
      {icon && <span className="shrink-0">{icon}</span>}
      {children}
    </span>
  )
}