import { useTranslation } from 'react-i18next';
import type { MitreTechnique, MitreTacticRef } from '@/api/types';

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

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

// Technique tag — angular, soft blue, monospace ID
export function MitreTechniqueTag({
  technique,
  onRemove,
  disabled = false,
}: TechniqueTagProps): JSX.Element {
  const { t } = useTranslation();
  return (
    <span
      data-testid="mitre-technique-tag"
      title={`${technique.id} — ${technique.name}`}
      className="tag-mitre gap-xxs"
    >
      {technique.id}
      {!disabled && (
        <button
          type="button"
          aria-label={`${t('mitre.tag.remove')} ${technique.id}`}
          onClick={onRemove}
          className="text-primary-deep opacity-60 hover:opacity-100 leading-none"
        >
          ×
        </button>
      )}
    </span>
  );
}

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