import ms from "pretty-ms";
import styles from "./GuessPane.module.css";
import { useRoundTimer } from "./hooks";

const RoundTimer = ({ onTimeout }) => {
  const remaining = useRoundTimer(onTimeout);
  return remaining > 0 ? (
    <span className={styles.timer}>Time: {ms(remaining * 1000)}</span>
  ) : (
    <span className={`${styles.timer} ${styles["timer--timeout"]}`}>
      Time&apos;s up!
    </span>
  );
};

export default RoundTimer;
