import ms from "pretty-ms";
import styles from "./GamePanel.module.css";
import useRaceModeCheck from "./useRaceModeCheck";

const RaceMode = ({ rate, cutoffTime }) => {
  const [first, faded] = useRaceModeCheck(rate, cutoffTime);

  if (first === null) {
    return <></>;
  }

  return (
    <div className={`${styles.cutoff} ${faded ? styles.hidden : ""}`}>
      You were cut off by {first}! Only {ms(cutoffTime * 1000)} left!
    </div>
  );
};

export default RaceMode;
