import React from "react";
import Avatar from "@mui/material/Avatar";
import "./PlayerColor.css";
import { styles } from "./Styles";

type PlayerColorProps = { color?: string };

const mapColor = (c?: string) => {
  if (!c) return undefined;
  switch (c.toLowerCase()) {
    case 'red':
      return 'R'
    case 'orange':
      return 'O'
    case 'white':
      return 'W'
    case 'blue':
      return 'B'
    default:
      if (['R', 'O', 'W', 'B'].includes(c)) {
        return c
      }
      return undefined
  }
};

const PlayerColor: React.FC<PlayerColorProps> = ({ color }) => {
  const k = mapColor(color) as keyof typeof styles | undefined;
  return <Avatar sx={k ? styles[k] : {}} className="PlayerColor" />;
};

export { PlayerColor };
