import { CurrencyManager } from "@/FormTableExt/Manage/Currency/CurrencyManager";
import { GameItemsContext } from "@/context/GameItemsContext";
import { useContext } from "react";

const Player = () => {
	const { player } = useContext(GameItemsContext);
	const { aId, name, m } = player;

	return (
		<div style={containerStyle}>
			<h2 style={titleStyle}>玩家資訊</h2>
			<div style={infoStyle}>
				<p><strong>aId:</strong> {aId}</p>
				<p><strong>暱稱:</strong> {name}</p>
				<p><strong>金幣:</strong> {CurrencyManager.GetNumberWithComma(m)}</p>
			</div>
		</div>
	);
};

export default Player;

const containerStyle: React.CSSProperties = {
	display: "flex",
	flexDirection: "column",
	justifyContent: "flex-start",
	alignItems: "flex-start",
	gap: "12px",
	width: "100%",
};

const titleStyle: React.CSSProperties = {
	margin: 0,
	fontSize: "1.2rem",
	fontWeight: 600,
};

const infoStyle: React.CSSProperties = {
	display: "flex",
	flexDirection: "column",
	gap: "8px",
	fontSize: "1rem",
	color: "#333",
};
