'use client'
import React from 'react'

type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent'

interface BadgeProps {
  label: string
  variant?: BadgeVariant
  style?: React.CSSProperties
}

const variantStyles: Record<BadgeVariant, React.CSSProperties> = {
  default: { background: 'var(--bg-warm)', color: 'var(--fg-muted)' },
  success: { background: 'var(--success)', color: 'var(--teal-900)' },
  warning: { background: '#f0c040', color: '#5a3e00' },
  error: { background: '#f8d7da', color: '#c0392b' },
  info: { background: 'var(--accent-soft)', color: 'var(--teal-900)' },
  accent: { background: 'var(--accent)', color: 'var(--paper)' },
}

export function Badge({ label, variant = 'default', style }: BadgeProps) {
  return (
    <span
      style={{
        display: 'inline-block',
        fontSize: 'var(--t-label)',
        fontFamily: 'var(--font-mono)',
        fontWeight: 500,
        textTransform: 'uppercase',
        letterSpacing: 'var(--label-ls)',
        padding: '2px var(--s-2)',
        borderRadius: 'var(--r-pill)',
        ...variantStyles[variant],
        ...style,
      }}
    >
      {label}
    </span>
  )
}
