import { useContext } from 'react' ; import { CountdownContext } from '../contexts/CountdownContext' ; import styles from '../styles/components/Countdown.module.css' ; import { FiPlayCircle , FiXCircle } from 'react-icons/fi' ; export function Countdown ( ) { const { minutes , seconds , hasFinished , isActive , startCountdown , resetCountdown , } = useContext ( CountdownContext ) ; const [ minutLeft , minutRight ] = String ( minutes ) . padStart ( 2 , '0' ) . split ( '' ) ; const [ secondLeft , secondRight ] = String ( seconds ) . padStart ( 2 , '0' ) . split ( '' ) ; return ( < div > < div className = { styles . CountdownContainer } > < div > < span > { minutLeft } < /span> < span > { minutRight } < /span> < /div> < span > : < /span> < div > < span > { secondLeft } < /span> < span > { secondRight } < /span> < /div> < /div> { hasFinished ? ( < button disabled className = { styles . countdownButton } > Finalizado ! < /button>) : (<> { isActive ? ( < button type = "button" className = { `${ styles . countdownButton } ${ styles . countdownButtonActive }` } onClick = { resetCountdown } > Abandonar < FiXCircle size = { 22 } / > < /button>) : (<button type="button" className={styles.countdownButton} onClick={startCountdown}> Começar a contagem < FiPlayCircle size = { 22 } / > < /button>)} < />)} < /div>); }