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

const css = `
.nbl-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;border-radius:var(--radius-sm);padding:3px 8px;border:1px solid transparent;}
.nbl-tag--default{background:var(--steel-100);color:var(--steel-700);border-color:var(--steel-200);}
.nbl-tag--blue{background:var(--blue-100);color:var(--blue-700);border-color:var(--blue-200);}
.nbl-tag--green{background:var(--green-100);color:var(--green-700);}
.nbl-tag--amber{background:var(--amber-100);color:var(--amber-700);}
.nbl-tag--red{background:var(--red-100);color:var(--red-700);}
.nbl-tag--violet{background:var(--violet-100);color:var(--violet-600);}
.nbl-tag__remove{display:inline-flex;align-items:center;cursor:pointer;opacity:.6;border:none;background:none;padding:0;color:inherit;margin-left:2px;}
.nbl-tag__remove:hover{opacity:1;}
`;

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

export interface TagProps {
  children: React.ReactNode;
  color?: 'default' | 'blue' | 'green' | 'amber' | 'red' | 'violet';
  onRemove?: () => void;
  className?: string;
}

export function Tag({ children, color = 'default', onRemove, className = '' }: TagProps) {
  inject('nbl-tag-css', css);
  const cls = ['nbl-tag', `nbl-tag--${color}`, className].filter(Boolean).join(' ');

  return (
    <span className={cls}>
      {children}
      {onRemove && (
        <button
          type="button"
          className="nbl-tag__remove"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          aria-label="Remove"
        >
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        </button>
      )}
    </span>
  );
}