import * as React from "react";
import { FunctionComponent } from "react";
import Util from "../../util/Util";
import PitViewModel from "../../viewmodel/PitViewModel";
import StoneView from "./StoneView";


const PitView: FunctionComponent<{
    pitViewModel: PitViewModel;
    onClick: () => void;
}> = ({ pitViewModel, onClick }) => {
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
        <StoneView key={index} color={pitViewModel.stoneColor} />
    ));

    return (
        <div
            onClick={onClick}
            style={{
                background: pitViewModel.pitColor,
                margin: "5px",
                padding: "5px",
                borderRadius: "10vw",
                transition: "background-color 0.5s",
                display: "flex",
                alignItems: "center",
                alignContent: "center",
                justifyContent: "center",
                justifyItems: "center",
                flexWrap: "wrap",
            }}
        >
            {stones}
        </div>
    );
};

export default PitView;