import type { MitreTechnique, MitreTacticRef } from '@/api/types';

interface TechniqueTagProps {
  technique: MitreTechnique;
  onRemove: () => void;
  disabled?: boolean;
}

interface TacticTagProps {
  tactic: MitreTacticRef;
  onRemove: () => void;
  disabled?: boolean;
}

// Technique chip — soft blue, id only, name in title
export function MitreTechniqueTag({
  technique,
  onRemove,
  disabled = false,
}: TechniqueTagProps): JSX.Element {
  return (
    <span
      data-testid="mitre-technique-tag"
      title={`${technique.id} — ${technique.name}`}
      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-full px-sm py-xxs text-[13px] font-medium"
    >
      {technique.id}
      {!disabled && (
        <button
          type="button"
          aria-label={`Remove ${technique.id}`}
          onClick={onRemove}
          className="text-primary-deep opacity-60 hover:opacity-100 leading-none"
        >
          ×
        </button>
      )}
    </span>
  );
}

// Tactic chip — primary blue filled, id only, name in title
export function MitreTacticTag({
  tactic,
  onRemove,
  disabled = false,
}: TacticTagProps): JSX.Element {
  return (
    <span
      data-testid="mitre-tactic-tag"
      title={`${tactic.id} — ${tactic.name}`}
      className="inline-flex items-center gap-xxs bg-primary text-white rounded-full px-sm py-xxs text-[13px] font-medium"
    >
      {tactic.id}
      {!disabled && (
        <button
          type="button"
          aria-label={`Remove ${tactic.id}`}
          onClick={onRemove}
          className="text-white opacity-60 hover:opacity-100 leading-none"
        >
          ×
        </button>
      )}
    </span>
  );
}
