Build a React team builder with role constraints

Problem (React)

Implement a small React UI that allows a user to build a team from a list of players.

UI

• Left panel: a list of available players . Each row shows at least: player name and role, plus an “Add” button.
• Right panel: a list of the current team (players already added).

Behaviors

1. Add player
   • Clicking “Add” on an available player adds them to the current team list.
   • Prevent duplicates (the same player cannot be added twice).
2. Role constraints
   • Each role has limits (min/max). Example (you may represent this as data passed via props):
     • Goalkeeper : min 1, max 1
     • Defender : min 3, max 5
     • Midfielder : min 2, max 5
     • Forward : min 1, max 3
   • When adding a player would violate a role’s max , block the action and show a user-visible message.
   • (Optional, if included) Provide a way to indicate whether the current team satisfies all role minimums .
3. Player details dialog
   • Clicking a player’s name (in either list) opens a modal/dialog showing that player’s detailed info.
4. Sorting / determinism
   • If the UI requires sorting players “by some attribute” (e.g., rating, number, or name), implement a deterministic order.
   • If the primary sort key can tie, define a secondary key (e.g., name) to keep ordering stable.

Input data

Assume you receive an array of players like:

type Player = {
  id: string;
  name: string;
  role: string;
  rating?: number;
  bio?: string;
};

and a role-constraint map like:

type RoleRule = { min: number; max: number };
Record<string, RoleRule>

Implement the component(s) and state updates needed to support the behaviors above.