import type { CSSProperties } from 'react';
import TeamLogo from '@/components/vyndr/TeamLogo';

/**
 * TeamChip (Design Rev 3) — a small team tile anchoring an abbr on a matchup /
 * context line. Design drew a 10-12px team-gradient chip before each abbr;
 * per the handoff we swap in the real TeamLogo img at the same size (the
 * resolver already renders the licensed ESPN logo where it resolves, and a
 * team-colored monogram otherwise — never a gray box).
 *
 * Renders `[tile] ABBR`. Inherits the row's opacity ramp because it sits inside
 * the row (no own opacity). Mono abbr, matching the matchup line.
 */
export default function TeamChip({
  team,
  sport,
  size = 12,
  showAbbr = true,
  style = {},
}: {
  team?: string | null;
  sport?: string;
  size?: number;
  showAbbr?: boolean;
  style?: CSSProperties;
}) {
  if (!team) return null;
  return (
    <span
      className="mono"
      style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: 'var(--text-1)', ...style }}
    >
      <TeamLogo team={team} sport={sport} size={size} />
      {showAbbr && String(team).toUpperCase()}
    </span>
  );
}
