type ChessBoardConfig = {
    // Right domain names
    squareSize: number;
    pieceSizePercent: number;
    lightSquareClassName: string;
    darkSquareClassName: string;
    pickedSquareClassName: string;
    checkedSquareClassName: string;
    hidePieceEffectClassName: string;
    squareHighlightClassName: string;
    selectedSquareClassName: string;
    holdedPieceClassName: string;
    possibleMoveMarkClassName: string;
    factorForSizeCircleMark: number;

    circleMarkColor: string;
    arrowColor: string;
    piecesMap: ChessPiecesMap;
    showMovesTrail: boolean;
    onHidePieces: (piece: Piece) => void;
}

type config = Partial<ChessBoardConfig>;

type FigureType = 
    "pawn-white"
    | "bishop-white" 
    | "knight-white" 
    | "rook-white" 
    | "queen-white" 
    | "king-white"
    | "pawn-black" 
    | "bishop-black" 
    | "knight-black" 
    | "rook-black" 
    | "queen-black" 
    | "king-black";

type ChessPiecesMap = {
    [key: FigureType]: (size /* from squareSize */) => JSX.Element;
}

const CUSTOM_PIECES_MAP = {
    "pawn-white": (size) => 
        <img width={size} height={size} src="white-pawn.png" />,

    "bishop-white": (size) => 
        <img width={size} height={size} src="bishop-pawn.png" />,

    "knight-white": (size) => 
        <img width={size} height={size} src="knight-pawn.png" />, 

    "rook-white": (size) => 
        <img width={size} height={size} src="rook-pawn.png" />, 

    "queen-white": (size) => 
        <img width={size} height={size} src="queen-pawn.png" />, 
    
    "king-white": (size) => 
        <img width={size} height={size} src="king-pawn.png" />,
    
    "pawn-black": (size) => 
        <img width={size} height={size} src="pawn-pawn.png" />, 
    
    "bishop-black": (size) => 
        <img width={size} height={size} src="bishop-pawn.png" />, 
    
    "knight-black": (size) => 
        <img width={size} height={size} src="knight-pawn.png" />, 
    
    "rook-black": (size) => 
        <img width={size} height={size} src="rook-pawn.png" />, 
    
    "queen-black": (size) => 
        <img width={size} height={size} src="queen-pawn.png" />, 
    
    "king-black": (size) => 
        <img width={size} height={size} src="king-pawn.png" />,
}