import Axios from "axios";
import { useEffect, useState } from "react";

const Imup = ({socket}) => {

  const [imuData, setImuData] = useState({});
  const [newImuData, setNewImuData] = useState({});
  socket.on("ImuData", (res) => {
    console.log(res);
    setImuData(res);

  })


  return (
    <div className={"border p-1 rounded pb-3 border-2 " + (imuData.connection ? "border-success " : "border-danger")  }>
    <h6>IMU</h6>
    <div>
      <div className="col-4 float-left text-right bold">X :</div>
      <span>{imuData.x}</span>
    </div>
    <div>
      <div className="col-4 float-left text-right bold">Y :</div>
      <span>{imuData.y}</span>
    </div>
    <div>
      <div className="col-4 float-left text-right bold">Z :</div>
      <span>{imuData.z}</span>
    </div>
  </div>
  );
};
export default Imu;
