/** Átomo: Badge
 *  Etiqueta pequena — label de feature, versão ou categoria.
 */
import { CSSProperties } from 'react'
import { tokens } from '../../systems/tokens'

const base: CSSProperties = {
  display    : 'inline-flex',
  alignItems : 'center',
  padding    : `${tokens.space[1]} ${tokens.space[3]}`,
  fontSize   : tokens.font.size.xs,
  fontFamily : tokens.font.family.mono,
  fontWeight : tokens.font.weight.semibd,
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
  borderRadius: tokens.radius.full,
  border     : `1px solid`,
  transition : `all ${tokens.animation.quick}s`,
}

export function Badge({
  children,
  variant  = 'accent',
  icon,
  style,
}: {
  children : React.ReactNode
  variant  ?: 'accent' | 'secondary' | 'neutral' | 'success'
  icon     ?: React.ReactNode
  style    ?: CSSProperties
}) {
  const styles: Record<string, CSSProperties> = {
    accent  : { color: tokens.color.accent, borderColor: tokens.color.accent + '60', background: tokens.color.accentMuted },
    secondary: { color: tokens.color.secondary, borderColor: tokens.color.secondary + '60', background: tokens.color.secondaryMuted },
    neutral : { color: tokens.color.gray400,   borderColor: tokens.color.gray700, background: 'transparent' },
    success : { color: tokens.color.success,   borderColor: tokens.color.success + '60', background: 'rgba(34,197,94,.1)' },
  }
  return (
    <span style={{...base, ...styles[variant], ...style }}>
      {icon && <span style={{ marginRight: 4 }}>{icon}</span>}
      {children}
    </span>
  )
}