import { PieceId } from "interface";
import "./Die.scss";

interface DieProps {
  die: {
    pieceId: PieceId;
    isSelected: boolean;
    isDisabled: boolean;
    rotation: number;
  };
  handleDieClick: (die: {
    pieceId: PieceId;
    isSelected: boolean;
    isDisabled: boolean;
    rotation: number;
  }) => void;
}

const Die = (props: DieProps) => {
  const { die, handleDieClick } = props;
  const { pieceId, isSelected, isDisabled, rotation } = die;
  const className =
    "dice" +
    (isSelected ? " selected" : "") +
    (isDisabled ? " disabled" : "") +
    ` rotate-${rotation}`;

  return (
    <div className={className} onClick={() => handleDieClick(die)}>
      <img src={`pieces/${pieceId}.jpeg`}></img>
    </div>
  );
};

export default Die;
