import ms from "pretty-ms";
import styles from "./GamePanel.module.css";
import { useFirstSubmitter, useIsFaded } from "./hooks";

const RaceMode = ({ rate, cutoffTime }) => {
  const first = useFirstSubmitter(rate, cutoffTime);
  const faded = useIsFaded(first);

  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;
