import React from 'react';
import { cn } from '../../lib/utils.ts';

interface BadgeProps {
  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  children: React.ReactNode;
}

export const Badge: React.FC<BadgeProps> = ({ variant = 'default', children }) => {
  const variants: Record<string, string> = {
    default: 'bg-[var(--brand-100)] text-[var(--brand-800)]',
    success: 'bg-[var(--success)]/10 text-[var(--success)]',
    warning: 'bg-[var(--warning)]/10 text-[var(--warning)]',
    danger: 'bg-[var(--danger)]/10 text-[var(--danger)]',
    info: 'bg-[var(--info)]/10 text-[var(--info)]',
  };
  return (
    <span className={cn('inline-flex items-center px-2 py-0.5 rounded-[var(--r-pill)] text-xs font-medium', variants[variant])}>
      {children}
    </span>
  );
};