import type { ReactNode } from 'react';

type BadgeStatus = 'ok' | 'error' | 'warn' | 'info';

interface BadgeProps {
  status: BadgeStatus;
  children: ReactNode;
}

const dotColor: Record<BadgeStatus, string> = {
  ok: 'bg-accent-green',
  error: 'bg-accent-red',
  warn: 'bg-accent-amber',
  info: 'bg-accent-blue',
};

export function Badge({ status, children }: BadgeProps) {
  return (
    <span className="inline-flex items-center gap-1.5 text-xs text-text-secondary">
      <span className={`w-2 h-2 rounded-full ${dotColor[status]}`} />
      {children}
    </span>
  );
}
