/*
* https://frontendeval.com/questions/analog-clock
*
* Create an analog clock with hour, minute, and second hands. Each of the hands should be accurate to the browser's local timezone and update once per second.
*/


const Clock = ({hours, minutes, seconds})=>{
  const getHourStyle= ()=>{
     let degree = 360/12 * hours ;
      return {
        transform: `rotate(${degree}deg)`,
      };
  }
  
  const getHandStyle = (hand) =>{
    let degree = 360/60 * hand
     return {
        transform: `rotate(${degree}deg)`,
      };
  }
  
 
  return(
    <div className="clock">
      <div className="clock_hand hour"  style={getHourStyle()}> </div>
      <div className="clock_hand minute"  style={getHandStyle(minutes)}> </div>
      <div className="clock_hand second" style={getHandStyle(seconds)}> </div>
     </div>
  
  ) 
}

const App = () => {
   const time = new Date();
  const [hour, setHour] = React.useState(time.getHours()%12);
  const [minute, setMinute] = React.useState(time.getMinutes());
  const [second, setSecond] = React.useState(time.getSeconds());
  
 React.useEffect(()=>{
    const interval = setInterval(()=>{
      let newSecond = second+1;
      let newMinute = minute;
      if(newSecond ==60){
        newMinute++;
        setMinute((prev)=>((prev++)%60));
      }
      if(newMinute == 60){
         setHour(prev=>(prev+1)%12);
      }
      setSecond((prev)=> (prev+1)%60);
     
    },1000); 
     return ()=> clearInterval(interval);
  }, []);
 
  
   return(
     <Clock hours={hour} minutes={minute} seconds={second}/>
   )
    
    
}

ReactDOM.render(<App />, document.getElementById('app'));