function cx(...args) {
  return args.filter(Boolean).join(' ');
}

const COLORS = {
  ok: 'bg-emerald-500',
  warn: 'bg-amber-500',
  danger: 'bg-rose-500',
  neutral: 'bg-slate-400',
};

export default function StatusDot({ tone = 'neutral', pulse, label, mono }) {
  const dot = COLORS[tone] || COLORS.neutral;
  return (
    <span className="inline-flex items-center gap-2">
      <span className="relative flex h-2 w-2">
        {pulse && <span className={cx('animate-ping absolute inline-flex h-full w-full rounded-full opacity-60', dot)} />}
        <span className={cx('relative inline-flex rounded-full h-2 w-2', dot)} />
      </span>
      {label && <span className={cx('text-xs', mono && 'font-mono')}>{label}</span>}
    </span>
  );
}