function BetModal({ pick, onClose }) {
  if (!pick) return null;
  const isParlay = Array.isArray(pick.legs) && pick.legs.length > 0;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20">
      <div className="card rounded-xl p-6 w-96 shadow-xl">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">Bet Details</h2>
          <button className="btn-alt px-3 py-1 rounded" onClick={onClose}>
            Close
          </button>
        </div>
        {isParlay ? (
          <div className="mb-2">
            {pick.legs.map((leg, i) => (
              <div key={i} className="mb-2">
                <div className="font-medium">
                  {leg.selection} {leg.odds != null && (
                    <span className="muted">({signOdds(Number(leg.odds))})</span>
                  )}
                </div>
                <div className="muted text-sm">
                  {leg.league} - {leg.event}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="mb-2">
            <div className="font-medium">
              {pick.selection} {pick.odds != null && (
                <span className="muted">({signOdds(Number(pick.odds))})</span>
              )}
            </div>
            <div className="muted text-sm">
              {pick.league} - {pick.event}
            </div>
          </div>
        )}
        <div className="grid gap-1 mt-4 text-sm">
          <div>
            <span className="font-semibold">Stake:</span> {dollars(pick.stake)}
          </div>
          <div>
            <span className="font-semibold">Status:</span>{" "}
            {pick.status || pick.state || "open"}
          </div>
        </div>
      </div>
    </div>
  );
}

window.BetModal = BetModal;