import React from 'react';
import { Icon } from './Icon';

const CSS = `
.ct-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: var(--letter-spacing-label);
  padding: 4px 9px;
  border-radius: var(--radius-round);
  white-space: nowrap;
}
.ct-tag--est { background: var(--label-est-bg); color: var(--label-est-text); }
.ct-tag--p1 { background: var(--danger-tint); color: var(--label-p1); }
.ct-tag--p2 { background: var(--warn-tint); color: var(--label-p2); }
.ct-tag--p3 { background: var(--info-tint); color: var(--label-p3); }
.ct-tag--p4 { background: var(--paper-2); color: var(--label-p4); }
.ct-tag--hard { background: var(--label-hard); color: var(--ink-inverse); }
.ct-tag--plain { background: var(--paper-2); color: var(--ink-2); }
.ct-tag__x {
  display: inline-flex; padding: 0; margin: 0 -3px 0 0;
  background: none; border: none; color: inherit; cursor: pointer; opacity: 0.6;
}
.ct-tag__x:hover { opacity: 1; }
`;
(function inject() {
  if (typeof document !== 'undefined' && !document.getElementById('ct-tag-css')) {
    const s = document.createElement('style'); s.id = 'ct-tag-css'; s.textContent = CSS;
    document.head.appendChild(s);
  }
})();

function toneFor(label) {
  if (label.startsWith('est/')) return 'est';
  if (label === 'p/1') return 'p1';
  if (label === 'p/2') return 'p2';
  if (label === 'p/3') return 'p3';
  if (label === 'p/4') return 'p4';
  if (label === 'deadline/hard') return 'hard';
  return 'plain';
}

export function Tag({ label, onRemove, style, ...rest }) {
  return (
    <span className={`ct-tag ct-tag--${toneFor(label)}`} style={style} {...rest}>
      {label}
      {onRemove ? (
        <button type="button" className="ct-tag__x" aria-label={`Remove ${label}`} onClick={onRemove}>
          <Icon name="x" size={11} strokeWidth={2} />
        </button>
      ) : null}
    </span>
  );
}
