getting data but no locations

app/page.tsx

@@ -1,77 +1,15 @@
+import Weather from '../components/Weather'
 
-
-// const lat: string = '55.645519';
-// const long: string = '12.549600';
-
-// interface Forecast {
-//   [coord: string]: {
-//     [lon: string]: number;
-//     [lat: string]: number;
-//   },
-//   [weather: string]: [
-//     {
-//       [id: string]: number,
-//       [main: string]: string,
-//       [description: string]: string,
-//       [icon: string]: string;
-//     }
-//   ],
-//   [base: string]: string;
-//   [main: string]: {
-//     [temp: string]: number;
-//     [feels_like: string]: number;
-//     [temp_min: string]: number;
-//     [temp_max: string]: number;
-//     [pressure: string]: number;
-//     [humidity: string]: number;
-//     [sea_level: string]: number;
-//     [grnd_level: string]: number;
-//   },
-//   [visibility: string]: number;
-//   [wind: string]: {
-//     [speed: string]: number;
-//     [deg: string]: number;
-//     [gust: string]: number;
-//   },
-//   [rain: string]: {
-//     [onehour: string]: number
-//   },
-//   [clouds: string]: {
-//     [all: string]: number
-//   },
-//   [dt: string]: number,
-//   [sys: string]: {
-//     [type: string]: number,
-//     [id: string]: number,
-//     [country: string]: string,
-//     [sunrise: string]: number,
-//     [sunset: string]: number;
-//   },
-//   [timezone: string]: number;
-//   [id: string]: number;
-//   [name: string]: string;
-//   [cod: string]: number;
-// };
-
-
-interface LocationType {
-  latitude: number;
-  longtitude: number;
-}
-
-
-function async getForecast(location: LocationType) {
-  const {latitude, longtitude} = location;
-  const forecast = fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${API_key}`)
-  return forecast
+const location = {
+  latitude: '55.645519',
+  longtitude: '12.549600'
 }
 
 export default function Home() {
   return (
     <main>
       <h1>The weather in Sluseholmen for the next 3 days</h1>
-      
-
+      <Weather location={location}/>
     </main>
   );
-}
+}

components/Weather.tsx

@@ -0,0 +1,76 @@
+import { error } from "console";
+
+interface Forecast {
+  coord: {
+    lon: number;
+    lat: number;
+  },
+  weather: 
+    {
+      id: number,
+      main: string,
+      description: string,
+      icon: string;
+    }[]
+  ,
+  base: string;
+  main: {
+    temp: number;
+    feels_like: number;
+    temp_min: number;
+    temp_max: number;
+    pressure: number;
+    humidity: number;
+    sea_level: number;
+    grnd_level: number;
+  },
+  visibility: number;
+  wind: {
+    speed: number;
+    deg: number;
+    gust: number;
+  },
+  rain: {
+    onehour: number
+  },
+  clouds: {
+    all: number
+  },
+  dt: number,
+  sys: {
+    type: number,
+    id: number,
+    country: string,
+    sunrise: number,
+    sunset: number;
+  },
+  timezone: number;
+  id: number;
+  name: string;
+  cod: number;
+};
+
+interface LocationType {
+  latitude: string;
+  longtitude: string;
+}
+
+async function getForecast(location: LocationType): Promise<Forecast> {
+  const {latitude, longtitude} = location;
+  const appId = '546911d860cb81f16585f7973b394b70';
+  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`)
+  if (!res.ok){
+    throw new Error(`This is not great ${error}`);
+    }
+  return res.json();
+  }
+
+export default async function Weather(location: LocationType) {
+    const weather = await getForecast(location)
+    return (
+      <main>
+        <h1>Forecast</h1>
+        <p>{weather.name}</p>
+      </main>
+    );
+  }