import { teamFlag } from '@/lib/teams';
import type { MatchProbs } from '@/lib/types';

const pct = (x: number) => `${Math.round(x * 100)}%`;

/** A match's win/draw/loss as a stacked bar with the two teams and the model's
 *  most likely scoreline. */
export function WinProbBar({
  home,
  away,
  probs,
  topScore,
}: {
  home: string;
  away: string;
  probs: MatchProbs;
  topScore?: { home: number; away: number };
}) {
  return (
    <div>
      <div className="mb-1 flex items-center justify-between text-sm">
        <span className="flex min-w-0 items-center gap-1.5">
          <span aria-hidden>{teamFlag(home)}</span>
          <span className="truncate font-medium text-ink">{home}</span>
        </span>
        {topScore && (
          <span className="tnum shrink-0 px-2 text-xs text-faint" title="Most likely scoreline">
            {topScore.home}–{topScore.away}
          </span>
        )}
        <span className="flex min-w-0 items-center justify-end gap-1.5">
          <span className="truncate font-medium text-ink">{away}</span>
          <span aria-hidden>{teamFlag(away)}</span>
        </span>
      </div>
      <div className="flex h-2.5 overflow-hidden rounded-full bg-elevated">
        <div className="bg-accent" style={{ width: pct(probs.home) }} title={`${home} win ${pct(probs.home)}`} />
        <div className="bg-line-strong" style={{ width: pct(probs.draw) }} title={`Draw ${pct(probs.draw)}`} />
        <div className="bg-info" style={{ width: pct(probs.away) }} title={`${away} win ${pct(probs.away)}`} />
      </div>
      <div className="mt-1 flex justify-between text-[11px] tabular-nums text-muted">
        <span className="text-accent">{pct(probs.home)}</span>
        <span>draw {pct(probs.draw)}</span>
        <span className="text-info">{pct(probs.away)}</span>
      </div>
    </div>
  );
}
