import React from "react";
import styled from "styled-components";
import ms from "pretty-ms";
import useCountdown from "../../hooks/useCountdown";

const TimerSpan = styled.span`
  padding: 1px;
  display: inline;
`

const TimedOut = styled(TimerSpan)`
  color: red;
`

export default ({ seconds, onTimeout }) => {
  const [remaining] = useCountdown(seconds, onTimeout);

  return remaining > 0 
    ? <TimerSpan>Time: {ms(remaining * 1000)}</TimerSpan> 
    : <TimedOut>Time's up!</TimedOut>
}