import "./Die.scss";
import { DieViewProps } from "../types/DieViewProps";

interface DieProps {
  die: DieViewProps;
  handleDieClick: (die: DieViewProps) => 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;