import { badgeStyle, glyphSvg } from '@/lib/archetypes';

interface ArchetypeBadgeProps {
  archetype: string; // VYNDR archetype name, e.g. "BOMBER" (case-insensitive; legacy names resolve too)
  sport?: string; // nba/mlb/wnba/soccer — informational; styling is per-archetype
  variant?: 'full' | 'ghost' | 'tint';
  size?: 'sm' | 'md';
  showDesc?: boolean;
}

/**
 * ArchetypeBadge (Session 42) — ported pixel-for-pixel from the design's
 * ArchetypeBadge.dc.html. JetBrains Mono label + a per-archetype glyph.
 *   full  = solid fill   (PRIMARY)
 *   ghost = transparent + colored border (SECONDARY)
 *   tint  = subtle tinted bg (default)
 * Data never glitches — this is a chrome label, no animation.
 */
export default function ArchetypeBadge({
  archetype,
  sport,
  variant = 'tint',
  size = 'sm',
  showDesc = false,
}: ArchetypeBadgeProps) {
  const s = badgeStyle(archetype, variant, size, sport);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, verticalAlign: 'middle' }}>
      <span
        className="mono"
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 5,
          fontWeight: 700,
          textTransform: 'uppercase',
          letterSpacing: '0.07em',
          lineHeight: 1,
          boxSizing: 'border-box',
          whiteSpace: 'nowrap',
          fontSize: s.fontSize,
          padding: s.padding,
          borderRadius: s.radius,
          color: s.textColor,
          background: s.bg,
          border: `1px solid ${s.borderColor}`,
          textShadow: s.textShadow,
        }}
      >
        {s.glyphChar ? (
          // Combat glyphs are unicode chars (data never glitches — chrome label).
          <span
            aria-hidden
            style={{ display: 'inline-flex', flex: 'none', alignItems: 'center', justifyContent: 'center', width: s.glyphSize, fontSize: s.glyphSize, lineHeight: 1, color: s.glyphColor }}
          >
            {s.glyphChar}
          </span>
        ) : (
          <span
            style={{ display: 'inline-flex', flex: 'none', width: s.glyphSize, height: s.glyphSize, color: s.glyphColor }}
            dangerouslySetInnerHTML={{ __html: glyphSvg(s.glyph) }}
          />
        )}
        {s.name}
      </span>
      {showDesc && s.desc && (
        <span style={{ fontFamily: 'var(--sans)', fontSize: s.descSize, color: '#7A7E8C', whiteSpace: 'nowrap' }}>
          {s.desc}
        </span>
      )}
    </span>
  );
}
