function MainComponent() { const [selectedPlayer, setSelectedPlayer] = React.useState(null); const handlePlayerSelect = (player)=>{ setSelectedPlayer(player); }; const playerCard = (player)=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 rounded-lg p-4 shadow-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl mb-3", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, player.name), /*#__PURE__*/ React.createElement("img", { src: player.imageSrc, alt: `Player ${player.name} avatar`, className: "w-32 h-32 rounded-full mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlayerSelect(player), className: `px-6 py-2${selectedPlayer === player ? ' bg-[#d32f2f]' : ' bg-[#1a73e8]'} text-white font-medium rounded-full transition-colors`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, selectedPlayer === player ? 'Selected' : 'Choose')); const players = [ { name: 'Player 1', imageSrc: './player1.png' }, { name: 'Player 2', imageSrc: './player2.png' }, { name: 'Player 3', imageSrc: './player3.png' } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-700 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "⚽ SoccerStars Game"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-6xl", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, players.map((player)=>playerCard(player))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-10", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-xl text-white mb-3", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Match Settings"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "team-name", className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Team Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "team-name", name: "teamName", className: "px-3 py-2 border rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "team-color", className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Team Color"), /*#__PURE__*/ React.createElement("input", { type: "color", id: "team-color", name: "teamColor", className: "border rounded h-10", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "match-duration", className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Match Duration (minutes)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "match-duration", name: "matchDuration", className: "px-3 py-2 border rounded", min: "5", max: "90", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-6 py-2 bg-[#34a853] text-white font-medium rounded-full hover:bg-[#2b8f47] transition-colors", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Start Match")))); }