local-weather/components/WeatherHero.tsx

import Image from "next/image";
import cloudAndLightening from '../public/cloud-and-lightening.svg'
import cloudAndMoon from '../public/cloud-and-moon.svg'
import cloudAndRain from '../public/cloud-and-rain.svg'
import cloudAndSnow from '../public/cloud-and-snow.svg'
import cloudAndWind from '../public/cloud-and-wind.svg'
import cloudSnowRain from '../public/cloud-snow-rain.svg'
import cloudAndSun from '../public/cloud-and-sun.svg'
import cloudWindRain from '../public/cloud-wind-rain.svg'
import cloud from '../public/cloud.svg'
import moon from '../public/moon.svg'
import sun from '../public/sun.svg'

import { useContext } from "react";
import { WeatherContext } from "./WeatherNow";



function getCurrentWeatherIcon(weatherCode: number) {
    switch (weatherCode) {
        default:
            return sun;
        case 0: // clear sky
            return sun;
        case 1: // clear mainly 
            return cloudAndSun;
        case 2: // partly cloudy
            return cloud;
        case 3: // overcast
            return cloud;
        case 45: // fog
            return cloud;
        case 48: // fog rime
            return cloud;
        case 51: // drizzle light
            return cloudAndRain;
        case 53: // drizzle moderate
            return cloudAndRain;
        case 55: // drizzle dense
            return cloudAndRain;
        case 56: // drizzle light freezing 
            return cloudSnowRain;
        case 57: // drizzle dense freezing 
            return cloudSnowRain;
        case 61: // rain slight
            return cloudAndRain;
        case 63: // rain moderate
            return cloudAndRain;
        case 65: // rain heavy
            return cloudAndRain;
        case 66: // rain light freezing
            return cloudWindRain;
        case 67: // rain dense freezing
            return cloudWindRain;
        case 71: // snow slight
            return cloudAndSnow;
        case 73: // snow moderate
            return cloudAndSnow;
        case 75: // snow heavy
            return cloudAndSnow;
        case 77: // snow grains
            return cloudAndSnow;
        case 80: // rain showers slight
            return cloudAndRain;
        case 81: // rain showers moderate
            return cloudAndRain;
        case 82: // rain showers violent
            return cloudAndRain;
        case 85: // snow showers slight
            return cloudAndSnow;
        case 86: // snow showers heavy
            return cloudAndSnow;
        case 95: // thunderstorm
            return cloudAndLightening;
        case 96: //thunderstorm hail slight
            return cloudAndLightening;
        case 99: //thunderstorm hail heavy
            return cloudAndLightening;
    }
};


export default function WeatherHero() {
    const { weather } = useContext(WeatherContext);
    const weatherCode = weather.current.weather_code;
    return(
    <>
    <Image className="h-1/3 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
    </>
)
};