import React, {useEffect, useState} from 'react';
import { EVENT_NAMES } from "./../../enums/enums"
import "./style.scss"
import Brake from "./../../assets/icons/brake.svg"
const BrakeStable = (props) => {

    const [brake, setBrake] = useState(0);

    useEffect(
        () => {
          window.electron.receive(EVENT_NAMES.TELEMETRY_BREAK, (data) => {
            setBrake(data)
          })
          return () => {
          };
        },[]
      );

    return (
        <div className="brake-stable">
            <div className="brake-stable__container">
                <img className="brake-stable__icon" src={Brake} />
                <div style={{height: brake}} className="brake-stable__brake"></div>
            </div>
            
        </div>
    );
}

export default BrakeStable;