import cat2 from '../res/bongo2.png';
import cat_left from '../res/bongo_l.png';
import cat_right from '../res/bongo_r.png';
import cat_high from '../res/bongo_w.png';

export const BongoCat: React.FC<{ beatProgress: number | null, onClick: () => void, high?: boolean }> = ({ beatProgress, onClick, high }) => {

  let image: string = cat2;

  if (beatProgress !== null) {
    const fractional = beatProgress % 1;
    const rounded = Math.round(beatProgress);
    if (fractional < 0.5)
      if (rounded % 2 == 0) {
        image = cat_left;
      } else {
        image = cat_right;
      }
  }
  if (high)
    image=cat_high;

  return <div onClick={onClick} className="float-right" >
    <div className={"bongo-box" + (high ? " high" : "")} >
      <img style={{ objectFit: "scale-down", height: "100%" }} src={image} />
    </div>
  </div>;
}
