import React from "react";
import "./Dice.css";
import { assetsPath } from "./Common";

type DiceProps = {
  pips: number | string;
};

const Dice: React.FC<DiceProps> = ({ pips }) => {
  let name: string;
  switch (pips.toString()) {
    case "1":
      name = "one";
      break;
    case "2":
      name = "two";
      break;
    case "3":
      name = "three";
      break;
    case "4":
      name = "four";
      break;
    case "5":
      name = "five";
      break;
    default:
    case "6":
      name = "six";
      break;
  }
  return <img alt={name} className="Dice" src={`${assetsPath}/gfx/dice-six-faces-${name}.svg`} />;
};

export { Dice };
