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

const Imu = ({socket}) => {

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

  })
  // useEffect(() => {
  //   Axios({
  //     method: "GET",
  //     withCredentials: true,
  //     url: process.env.REACT_APP_BACKEND_URL + "/imuInfo",
  //   }).then(async (res) => {
  //     console.log("********************");
  //     setImuData(res.data);
  //     console.log(res.data);
  //   });
  // }, [newImuData]);

  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;
