import { Icon, type ApprovedIconName } from './Icon';
import styles from './StatusBadge.module.css';

export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';

const icons: Partial<Record<StatusTone, ApprovedIconName>> = {
  info: 'info',
  success: 'check',
  warning: 'warning',
  error: 'error',
};

export function StatusBadge({
  children,
  tone = 'neutral',
  showIcon = false,
}: {
  children: string;
  tone?: StatusTone;
  showIcon?: boolean;
}) {
  const icon = icons[tone];
  return (
    <span className={`${styles.badge} ${styles[tone]}`}>
      {showIcon && icon ? <Icon name={icon} size="sm" /> : null}
      {children}
    </span>
  );
}