TriggerFrontend/src/components/WeatherModal/WeatherIcon.tsx

import { Image } from '@mantine/core';
import CloudyIcon from '../../assets/weather/cloudy.svg';
import HazeIcon from '../../assets/weather/haze.svg';
import HeavyRainIcon from '../../assets/weather/heavy-rain.svg';
import PartlyCloudyIcon from '../../assets/weather/partly-cloudy.svg';
import RainIcon from '../../assets/weather/rain.svg';
import SleetIcon from '../../assets/weather/sleet.svg';
import SnowIcon from '../../assets/weather/snow.svg';
import SunnyIcon from '../../assets/weather/sunny.svg';
import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
import WindyIcon from '../../assets/weather/windy.svg';

export default function WeatherIcon({ textDescription }: { textDescription: string }) {
	const icon = textDescription.includes('then')
		? textDescription.substring(0, textDescription.trim().indexOf('then'))
		: textDescription;

	const Icon = () => {
		switch (icon.trim()) {
			case 'Ash':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Broken Clouds':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={PartlyCloudyIcon}
						alt='PartlyCloudyIcon'
					/>
				);
			case 'Chance Rain Showers':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Chance Showers':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Slight Chance Showers':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Clear':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SunnyIcon}
						alt='SunnyIcon'
					/>
				);
			case 'Cloudy':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={CloudyIcon}
						alt='CloudyIcon'
					/>
				);
			case 'Dust':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Drizzle':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Fog':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Freezing Rain':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SleetIcon}
						alt='SleetIcon'
					/>
				);
			case 'Haze':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Heavy Rain':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HeavyRainIcon}
						alt='HeavyRainIcon'
					/>
				);
			case 'Heavy Snow':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SnowIcon}
						alt='SnowIcon'
					/>
				);
			case 'Light Rain':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Mist':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Moderate Rain':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Mostly Cloudy':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={CloudyIcon}
						alt='CloudyIcon'
					/>
				);
			case 'Overcast Clouds':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={PartlyCloudyIcon}
						alt='PartlyCloudyIcon'
					/>
				);
			case 'Patchy Fog':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Partly Sunny':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={PartlyCloudyIcon}
						alt='PartlyCloudyIcon'
					/>
				);
			case 'Rain':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Scattered Clouds':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={PartlyCloudyIcon}
						alt='PartlyCloudyIcon'
					/>
				);
			case 'Showers':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={RainIcon}
						alt='RainIcon'
					/>
				);
			case 'Sleet':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SleetIcon}
						alt='SleetIcon'
					/>
				);
			case 'Smoke':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={HazeIcon}
						alt='HazeIcon'
					/>
				);
			case 'Snow':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SnowIcon}
						alt='SnowIcon'
					/>
				);
			case 'Squall':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={WindyIcon}
						alt='WindyIcon'
					/>
				);
			case 'Thunderstorm':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={ThunderstormIcon}
						alt='ThunderstormIcon'
					/>
				);
			case 'Tornado':
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={WindyIcon}
						alt='WindyIcon'
					/>
				);

			default:
				return (
					<Image
						style={{ width: '75px', height: '75px' }}
						src={SunnyIcon}
						alt='SunnyIcon'
					/>
				);
		}
	};

	return <Icon />;
}