// Brand palette: teal #409CA4, green #5cb85c, orange #e8713a, yellow #f0ad4e
const Badge = ({ children, variant = 'default', size = 'md' }) => {
  const variants = {
    default: 'bg-[#eaf5f6] text-[#409CA4] border-2 border-[#a2d4da]',
    success: 'bg-[#edf7ed] text-[#1e7e1e] border-2 border-[#b2dfb2]',
    warning: 'bg-[#fff8e1] text-[#b07a10] border-2 border-[#f5d9a0]',
    danger: 'bg-[#fdf0ea] text-[#e8713a] border-2 border-[#f5c5aa]',
    info: 'bg-[#eaf5f6] text-[#409CA4] border-2 border-[#a2d4da]',
    secondary: 'bg-gray-100 text-gray-700 border-2 border-gray-300',
    primary: 'bg-[#fdf6e3] text-[#b07a10] border-2 border-[#f5d9a0]',
    orange: 'bg-[#fdf0ea] text-[#e8713a] border-2 border-[#f5c5aa]',
  }

  const sizes = {
    sm: 'px-3 py-1 text-xs font-black rounded-lg uppercase tracking-wider',
    md: 'px-4 py-1.5 text-sm font-black rounded-lg uppercase tracking-wider',
    lg: 'px-5 py-2 text-base font-black rounded-xl uppercase tracking-wider',
    xl: 'px-6 py-2.5 text-lg font-black rounded-xl uppercase tracking-wider',
  }

  return (
    <span className={`inline-block ${variants[variant] ?? variants.default} ${sizes[size]}`}>
      {children}
    </span>
  )
}

export default Badge
