import { playerColor, profile } from "../profile";
import { Stylable } from "./toolbox";

export default (props: { playerKey: string } & Stylable) => {
	return (
		<div
			style={{
				...props.style,
				"background-color": playerColor(props.playerKey),
			}}
			class={`${props.class} w-20 h-20 rounded-full flex justify-center items-center`}
		>
			<p style={{ "font-size": "1em" }}>
				{profile(props.playerKey)()?.name}
			</p>
		</div>
	);
};