Untitled

<main className="flex flex-col h-full mt-12 mx-auto max-w-7xl">
	<div className=' w-fit'>
		<Dropdown menu={{items, onClick}}><Button>{getGameName() || "Choose Tour"}</Button></Dropdown>
	</div>
	<div className='flex flex-wrap'>
		{
			stagesDetails.length > 0 && currentGameId !== null &&
			<>
			<div className=''>
				<Carousel
					afterChange={e => setCurrentStageIndex(e) }
					className='bg-orange-200 w-full'
					arrows={true}
					prevArrow={<LeftCircleOutlined />}
					nextArrow={<RightCircleOutlined />}
					waitForAnimate={true}
					easing="easeIn"
					speed={1000}
				>
					{stagesDetails.map(stage =>
						<>
						<div className="flex justify-between text-lg font-bold  ">
							<div>Stage: {stage.stage_number}</div>
							<div>total points: {stage.riders.filter(rider => rider.player == selectedUser).map(rider => rider.total_points).reduce((prev, curr) => prev + curr, 0)}</div>
						</div>
						<div className="text-lg font-bold  text-center ">My team</div>
						<div className="flex flex-col items-center  space-y-6">
							{
								(() => {

									const riders = stage.riders.filter(rider => rider.player == selectedUser).sort((a,b) => showCumPoints ? a.total_points - b.total_points : a.cumulative_total_points - b.cumulative_total_points)
									console.log(stage.riders.map(rider => rider.player == selectedUser ? selectedUser : selectedUser))
									if (riders.length === 0) {
										return <div>No Riders</div>;
									}

									const topRider = riders.pop()!
									const activeRiders = riders.filter(rider => rider.status == "active")
									const subRiders = riders.filter(rider => rider.status == "sub")

									return (
										<>
										<div className=" mb-4 text-lg">
											<Image src="/img/crown.png" alt="Crown" width={32} height={32} className=""/>
											<Image src="/img/yellow_jersey.png" alt="Rider Shirt" width={80} height={80} className="" />
											<div className="mt-2 font-bold">{topRider.rider_name}</div>
											<div style={{ fontSize: '0.85em' }}>{topRider.team_name}</div>
											<div className="italic font-semibold">{topRider.total_points} points</div>
										</div>
										<div className='flex space-x-3'>
											{
											activeRiders.map(activeRider => 
												<div>
													<Image src="/img/rider-shirt.png" alt="Rider Shirt" width={64} height={64} className=" " />
													<div className="mt-2">{activeRider.rider_name}</div>
													<div style={{ fontSize: '0.7em' }}>{activeRider.team_name}</div>
													<div className='italic'>{activeRider.total_points} points</div>
												</div>
											)
											}
										</div>
										<div className='flex space-x-3'>
											{
											subRiders.map(rider => 
												<div>
													<Image src="/img/sub_shirt.png" alt="Rider Shirt" width={64} height={64} className="" />
													<div className="mt-2">{rider.rider_name}</div>
													<div style={{ fontSize: '0.7em' }}>{rider.team_name}</div>
													<div className='italic'>{rider.total_points} points</div>
												</div>
											)
											}
										</div>
										</>
									)

								})()
							}
						</div>
						<Switch
							checked={showCumPoints}
							onChange={handleSwitchChange}
							checkedChildren="cumulative points"
							unCheckedChildren="stage points"
							className=' bg-black'
						/>
						</>
					)}
				</Carousel>
			</div>
			<div className=' w-2/5 md:w-auto'>
				<div></div>
				<div><Button onClick={() => router.push('/stage-overview')}>Stages Overview</Button></div>
				<div></div>
			</div>
			</>
		}
	</div>
</main>