import Axios from "axios";
import {  useState } from "react";
 const lockDic =[{key : 1 , value : "value1"}, {key: 2 , value: "value2"}];
 
const Gps = ({socket}) => {
   

  const [gpsData, setGpsData] = useState({}); 
  socket.on("gpsData", (res) => {
   // console.log(res);
    setGpsData(res);

  })

  return (
    <div className={"border border-2 p-1 rounded pb-3 " + (gpsData.connection ? "border-success " : "border-danger")  } >
          <h6>GPS</h6>
          <div>
            <div className="col-6 float-left text-right bold">Status :</div>
            <span>{gpsData.lock}</span>
          </div>
          <div>
            <div className="col-6 float-left text-right bold">Accuracy :</div>
            <span>{gpsData.accuracy} m</span>
          </div>
          <div>
            <div className="col-6 float-left text-right bold">Base :</div>
            <span>{gpsData.base} km</span>
          </div>
        </div>
  );
};
export default Gps;
