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: ```ts type Player = { id: string; name: string; role: string; rating?: number; bio?: string; }; ``` and a role-constraint map like: ```ts type RoleRule = { min: number; max: number }; Record<string, RoleRule> ``` Implement the component(s) and state updates needed to support the behaviors above.