import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;border-radius:var(--radius-sm);padding:3px 7px;letter-spacing:var(--tracking-caps);text-transform:uppercase;}
.nbl-badge--pill{border-radius:var(--radius-pill);}
.nbl-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.nbl-badge--neutral{background:var(--steel-100);color:var(--steel-700);}
.nbl-badge--brand{background:var(--blue-100);color:var(--blue-700);}
.nbl-badge--success{background:var(--green-100);color:var(--green-700);}
.nbl-badge--warning{background:var(--amber-100);color:var(--amber-700);}
.nbl-badge--danger{background:var(--red-100);color:var(--red-700);}
.nbl-badge--solid{background:var(--color-primary);color:#fff;}
`;

inject('nbl-badge-css', css);

export interface BadgeProps {
  children: React.ReactNode;
  tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'solid';
  pill?: boolean;
  dot?: boolean;
  className?: string;
}

export function Badge({
  children,
  tone = 'neutral',
  pill = false,
  dot = false,
  className = '',
}: BadgeProps) {
  inject('nbl-badge-css', css);
  const cls = ['nbl-badge', `nbl-badge--${tone}`, pill ? 'nbl-badge--pill' : '', className]
    .filter(Boolean)
    .join(' ');

  return (
    <span className={cls}>
      {dot && <span className="nbl-badge__dot" />}
      {children}
    </span>
  );
}