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

type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'brand';

const toneClasses: Record<StatusTone, string> = {
  neutral: 'border-app-border bg-app-surface-muted text-app-muted',
  success: 'border-success/30 bg-success/10 text-success-text',
  warning: 'border-warning/40 bg-warning/10 text-warning-text',
  danger: 'border-danger/30 bg-danger/10 text-danger-text',
  brand: 'border-brand/30 bg-brand/10 text-brand-text',
};

type StatusBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
  tone?: StatusTone;
};

const StatusBadge: React.FC<StatusBadgeProps> = ({ className, tone = 'neutral', ...props }) => (
  <span
    className={cn(
      'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
      toneClasses[tone],
      className,
    )}
    {...props}
  />
);

export default StatusBadge;