import React, { useState } from "react";

function App() {
  const [data, setData] = useState({});
  const [location, setLocation] = useState("");

  const url = `https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid=ce309858c9580a2f86ac0e0f45374afb`;

  const fetchData = async () => {
    const response = await fetch(url);
    const result = await response.json();
    setData(result);
    console.log(result);
  };

  const handleSearch = () => {
  };
  
  
  function myGeoLocater() {
    {
      navigator.geolocation.getCurrentPosition((position)=>{
        let lat = position.coords.latitude;
        let long = position.coords.longitude;
        fetchData();
      }
    }
  }


  const kelvinToFahrenheit = (temp) => {
    return (((temp - 273.15) * 9) / 5 + 32).toFixed(2);
  };

  return (
    <div className="app">
      <div className="temperature">{data.name ? data.name : null}</div>

      <div className="temperature">
        {data.main ? <>{kelvinToFahrenheit(data.main.temp)}</> : null}
      </div>

      <button className="button" onClick={handleSearch}>
        Get Weather
      </button>
    </div>
  );
}

export default App;