import './Watch.css';

export const Watch = ({ seconds, minutes, hours }) => {
  const deg = 6;

  const hoursDeg = hours * 30;
  const minutesDeg = minutes * deg;
  const secondsDeg = seconds * deg;

  return (
    <div className="clock">
      <div className="hour">
        <div className="hourArrow" style={{ transform: `rotateZ(${hoursDeg}deg)` }}></div>
      </div>
      <div className="minute">
        <div style={{ transform: `rotateZ(${minutesDeg}deg)` }} className="minuteArrow"></div>
      </div>
      <div className="second">
        <div style={{ transform: `rotateZ(${secondsDeg}deg)` }} className="secondArrow"></div>
      </div>
    </div>
  );
};
