Weather Card

"use client";

import type React from "react";
import { useMemo, useState } from "react";
import {
	HugeiconsIcon,
	Location01Icon,
	SunriseIcon,
	SunsetIcon,
	ThermometerIcon,
} from "@/components/icons";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import { WeatherDetailItem } from "@/registry/new-york/ui/weather-detail-item";
import {
	CloudAngledRainIcon,
	CloudAngledZapIcon,
	CloudFogIcon,
	CloudIcon,
	CloudLittleRainIcon,
	CloudSnowIcon,
	DropletIcon,
	FastWindIcon,
	Moon02Icon,
	Sun03Icon,
	Tornado02Icon,
	VisionIcon,
} from "@/registry/new-york/ui/weather-icons";

export interface WeatherLocation {
	city: string;
	country: string | null;
	region: string | null;
}

export interface WeatherMain {
	temp: number;
	feels_like: number;
	temp_min: number;
	temp_max: number;
	pressure: number;
	humidity: number;
}

export interface WeatherWind {
	speed: number;
	deg: number;
}

export interface WeatherCondition {
	id: number;
	main: string;
	description: string;
	icon: string;
}

export interface WeatherSys {
	country: string;
	sunrise: number;
	sunset: number;
}

export interface ForecastDay {
	date: string;
	timestamp: number;
	temp_min: number;
	temp_max: number;
	humidity: number;
	weather: {
		main: string;
		description: string;
		icon: string;
	};
}

export interface WeatherData {
	coord?: {
		lon: number;
		lat: number;
	};
	weather: WeatherCondition[];
	main: WeatherMain;
	visibility?: number;
	wind: WeatherWind;
	dt: number;
	sys: WeatherSys;
	timezone: number;
	name: string;
	location: WeatherLocation;
	forecast?: ForecastDay[];
}

export interface WeatherCardProps {
	weatherData: WeatherData;
	className?: string;
	showForecast?: boolean;
	showDetails?: boolean;
	defaultUnit?: "celsius" | "fahrenheit";
}

// Helper function to convert timestamp to readable time
const formatTime = (timestamp: number, timezone: number): string => {
	const date = new Date((timestamp + timezone) * 1000);
	return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
};

// Helper function to convert celsius to fahrenheit
const celsiusToFahrenheit = (celsius: number): number => {
	return (celsius * 9) / 5 + 32;
};

// Helper function to get day of week from date string
const getDayOfWeek = (dateStr: string): string => {
	const date = new Date(dateStr);
	return date.toLocaleDateString("en-US", { weekday: "long" });
};

// Helper function to get weather icon component
const getWeatherIcon = (main: string, className: string = "", fill = "") => {
	switch (main.toLowerCase()) {
		case "thunderstorm":
			return <CloudAngledZapIcon className={className} color={fill} />;
		case "drizzle":
			return <CloudLittleRainIcon className={className} color={fill} />;
		case "rain":
			return <CloudAngledRainIcon className={className} color={fill} />;
		case "snow":
			return <CloudSnowIcon className={className} color={fill} />;
		case "haze":
			return <Sun03Icon className={className} color={fill} />;
		case "mist":
		case "smoke":
		case "dust":
		case "sand":
		case "ash":
		case "squall":
			return <CloudFogIcon className={className} color={fill} />;
		case "fog":
			return <CloudFogIcon className={className} color={fill} />;
		case "tornado":
			return <Tornado02Icon className={className} color={fill} />;
		case "clear":
			return <Sun03Icon className={className} fill={fill} color={fill} />;
		case "clouds":
			return <CloudIcon className={className} color={"#E5E7EB"} />;
		default:
			return <CloudIcon className={className} color={"#E5E7EB"} />;
	}
};

export const WeatherCard: React.FC<WeatherCardProps> = ({
	weatherData,
	className,
	showForecast = true,
	showDetails = true,
	defaultUnit = "celsius",
}) => {
	const [useFahrenheit, setUseFahrenheit] = useState(
		defaultUnit === "fahrenheit",
	);
	const [forecastExpanded, setForecastExpanded] = useState(true);
	const [detailsExpanded, setDetailsExpanded] = useState(false);

	const temp = weatherData.main.temp;
	const feelsLike = weatherData.main.feels_like;
	const weatherId = weatherData.weather[0].id;
	const sunriseTime = formatTime(weatherData.sys.sunrise, weatherData.timezone);
	const sunsetTime = formatTime(weatherData.sys.sunset, weatherData.timezone);

	// Convert temperature based on selected unit
	const displayTemp = useFahrenheit
		? Math.round(celsiusToFahrenheit(temp))
		: Math.round(temp);

	const displayFeelsLike = useFahrenheit
		? Math.round(celsiusToFahrenheit(feelsLike))
		: Math.round(feelsLike);

	// Determine the weather theme based on weather conditions
	const weatherTheme = useMemo(() => {
		// weather condition codes: https://openweathermap.org/weather-conditions
		if (weatherId >= 200 && weatherId < 300) {
			return {
				name: "Thunderstorm",
				icon: <CloudAngledZapIcon className="h-16 w-16" color="#FCD34D" />,
				gradient: "bg-gradient-to-br from-slate-800/80 to-purple-900/80",
				colorCode: "#FCD34D",
			};
		} else if (weatherId >= 300 && weatherId < 400) {
			return {
				name: "Drizzle",
				icon: <CloudLittleRainIcon className="h-16 w-16" color="#93C5FD" />,
				gradient: "bg-gradient-to-br from-slate-700/80 to-blue-800/80",
				colorCode: "#93C5FD",
			};
		} else if (weatherId >= 500 && weatherId < 600) {
			return {
				name: "Rain",
				icon: <CloudAngledRainIcon className="h-16 w-16" color="#60A5FA" />,
				gradient: "bg-gradient-to-br from-slate-800/80 to-blue-900/80",
				colorCode: "#60A5FA",
			};
		} else if (weatherId >= 600 && weatherId < 700) {
			return {
				name: "Snow",
				icon: <CloudSnowIcon className="h-16 w-16" color="#E0F2FE" />,
				gradient: "bg-gradient-to-br from-blue-100/80 to-indigo-300/80",
				colorCode: "#E0F2FE",
			};
		} else if (weatherId >= 700 && weatherId < 800) {
			// Atmospheric conditions
			if (weatherId === 701) {
				return {
					name: "Mist",
					icon: <CloudFogIcon className="h-16 w-16" color="#D1D5DB" />,
					gradient: "bg-gradient-to-br from-slate-400/80 to-slate-500/80",
					colorCode: "#D1D5DB",
				};
			} else if (weatherId === 711) {
				return {
					name: "Smoke",
					icon: <CloudFogIcon className="h-16 w-16" color="#9CA3AF" />,
					gradient: "bg-gradient-to-br from-gray-500/80 to-gray-700/80",
					colorCode: "#9CA3AF",
				};
			} else if (weatherId === 721) {
				return {
					name: "Haze",
					icon: <Sun03Icon className="h-16 w-16" color="#FDE68A" />,
					gradient: "bg-gradient-to-br from-amber-300/80 to-amber-500/80",
					colorCode: "#FDE68A",
				};
			} else if (weatherId === 731 || weatherId === 761) {
				return {
					name: "Dust",
					icon: <CloudFogIcon className="h-16 w-16" color="#FEF08A" />,
					gradient: "bg-gradient-to-br from-yellow-400/80 to-yellow-600/80",
					colorCode: "#FEF08A",
				};
			} else if (weatherId === 741) {
				return {
					name: "Fog",
					icon: <CloudFogIcon className="h-16 w-16" color="#D1D5DB" />,
					gradient: "bg-gradient-to-br from-gray-400/80 to-gray-600/80",
					colorCode: "#D1D5DB",
				};
			} else if (weatherId === 751) {
				return {
					name: "Sand",
					icon: <CloudFogIcon className="h-16 w-16" color="#FDBA74" />,
					gradient: "bg-gradient-to-br from-orange-300/80 to-orange-500/80",
					colorCode: "#FDBA74",
				};
			} else if (weatherId === 762) {
				return {
					name: "Volcanic Ash",
					icon: <CloudFogIcon className="h-16 w-16" color="#D4D4D8" />,
					gradient: "bg-gradient-to-br from-zinc-600/80 to-zinc-800/80",
					colorCode: "#D4D4D8",
				};
			} else if (weatherId === 771) {
				return {
					name: "Squall",
					icon: <FastWindIcon className="h-16 w-16" color="#93C5FD" />,
					gradient: "bg-gradient-to-br from-blue-500/80 to-blue-700/80",
					colorCode: "#93C5FD",
				};
			} else if (weatherId === 781) {
				return {
					name: "Tornado",
					icon: <Tornado02Icon className="h-16 w-16" color="#CBD5E1" />,
					gradient: "bg-gradient-to-br from-slate-600/80 to-slate-900/80",
					colorCode: "#CBD5E1",
				};
			} else {
				return {
					name: "Atmosphere",
					icon: <CloudFogIcon className="h-16 w-16" color="#D1D5DB" />,
					gradient: "bg-gradient-to-br from-slate-400/80 to-slate-600/80",
					colorCode: "#D1D5DB",
				};
			}
		} else if (weatherId === 800) {
			return {
				name: "Clear",
				icon: <Sun03Icon className="h-16 w-16" color="#FBBF24" />,
				gradient: "bg-gradient-to-br from-yellow-500/80 to-orange-500/80",
				colorCode: "#FBBF24",
			};
		} else if (weatherId >= 801 && weatherId <= 802) {
			return {
				name: "Partly Cloudy",
				icon: <CloudIcon className="h-16 w-16" color="#E5E7EB" />,
				gradient: "bg-gradient-to-br from-blue-400/80 to-blue-600/80",
				colorCode: "#E5E7EB",
			};
		} else if (weatherId >= 803 && weatherId <= 804) {
			return {
				name: "Cloudy",
				icon: <CloudIcon className="h-16 w-16" color="#E5E7EB" />,
				gradient: "bg-gradient-to-br from-slate-500/80 to-slate-700/80",
				colorCode: "#E5E7EB",
			};
		} else {
			return {
				name: "Unknown",
				icon: <CloudIcon className="h-16 w-16" color="#E5E7EB" />,
				gradient: "bg-gradient-to-br from-slate-500/80 to-slate-700/80",
				colorCode: "#E5E7EB",
			};
		}
	}, [weatherId]);

	return (
		<div
			className={cn(
				"relative w-full overflow-hidden rounded-3xl p-6 shadow-lg backdrop-blur-sm sm:max-w-md",
				weatherTheme.gradient,
				className,
			)}
		>
			{/* Location Info */}
			<div className="mb-3 flex items-start justify-between gap-10">
				<div className="flex items-start">
					<HugeiconsIcon
						icon={Location01Icon}
						size={20}
						className="relative top-1 mr-2 text-white"
					/>
					<div>
						<h2 className="flex items-center text-xl font-bold text-white">
							{weatherData.location.city}
							{weatherData.location.region
								? `, ${weatherData.location.region}`
								: ""}
						</h2>
						<p className="text-xs" style={{ color: weatherTheme.colorCode }}>
							{weatherData.location.country}
						</p>
					</div>
				</div>

				<div className="flex items-center">
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button
								variant="ghost"
								size="icon"
								className="h-8 w-8 rounded-full bg-white/10 text-white hover:bg-white/20 hover:text-white"
								aria-label="Temperature settings"
							>
								<HugeiconsIcon icon={ThermometerIcon} size={20} />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent
							align="end"
							className="w-40 border-zinc-700 bg-zinc-800 text-white"
						>
							<DropdownMenuLabel>Temperature Unit</DropdownMenuLabel>
							<DropdownMenuSeparator className="bg-zinc-700" />
							<div className="px-2 py-2">
								<div className="flex items-center justify-between gap-2">
									<Button
										variant={useFahrenheit ? "secondary" : "ghost"}
										size="sm"
										className="flex-1"
										onClick={() => setUseFahrenheit(true)}
									>
										°F
									</Button>
									<Button
										variant={!useFahrenheit ? "secondary" : "ghost"}
										size="sm"
										className="flex-1"
										onClick={() => setUseFahrenheit(false)}
									>
										°C
									</Button>
								</div>
							</div>
						</DropdownMenuContent>
					</DropdownMenu>
				</div>
			</div>

			{/* Main Weather Display */}
			<div className="mb-2 flex items-center justify-between gap-5">
				<div className="flex items-center justify-center">
					{weatherTheme.icon}
				</div>

				<div>
					<div className="flex items-baseline">
						<span className="text-4xl font-bold text-white">
							{displayTemp}°
						</span>
						<span className="ml-1 text-sm font-medium text-white/80">
							{useFahrenheit ? "F" : "C"}
						</span>
					</div>
					<p
						className="text-xs"
						style={{
							color: weatherTheme.colorCode,
							filter: "brightness(1.3)",
						}}
					>
						Feels like: {displayFeelsLike}°
					</p>
				</div>

				<p className="capitalize font-medium text-white">
					{weatherData.weather[0].description}
				</p>
			</div>

			{/* Weather Forecast */}
			{showForecast &&
				weatherData.forecast &&
				weatherData.forecast.length > 0 && (
					<div className="mt-4">
						<button
							type="button"
							onClick={() => setForecastExpanded(!forecastExpanded)}
							className="mb-2 flex w-full items-center justify-between text-sm font-normal text-white"
						>
							<span>Weekly Forecast</span>
							<svg
								className={cn(
									"h-4 w-4 transition-transform",
									forecastExpanded && "rotate-180",
								)}
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
								aria-hidden="true"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d="M19 9l-7 7-7-7"
								/>
							</svg>
						</button>
						{forecastExpanded && (
							<div className="space-y-2 pb-2">
								{weatherData.forecast.map((day, idx) => {
									const dayTemp = useFahrenheit
										? Math.round(celsiusToFahrenheit(day.temp_max))
										: Math.round(day.temp_max);
									const nightTemp = useFahrenheit
										? Math.round(celsiusToFahrenheit(day.temp_min))
										: Math.round(day.temp_min);

									return (
										<div
											key={idx}
											className="flex items-center justify-start rounded-2xl bg-black/10 px-2 py-1 text-white"
										>
											<div className="flex w-full flex-1 items-center justify-start gap-2">
												<div className="flex items-center justify-center">
													{getWeatherIcon(
														day.weather.main,
														"h-7 w-7",
														weatherTheme.colorCode,
													)}
												</div>
												<div className="w-24">
													<span className="font-semibold text-white">
														{getDayOfWeek(day.date)}
													</span>
												</div>
											</div>

											<div className="flex w-24 justify-end">
												<div className="flex flex-row items-end gap-2">
													<div className="flex items-center">
														<Sun03Icon
															className="mr-1.5 h-7 w-7"
															color="#FCD34D"
															fill="#FCD34D"
														/>
														<span className="w-8 font-medium text-white">
															{dayTemp}°
														</span>
													</div>
													<div className="mt-1 flex items-center">
														<Moon02Icon
															className="mr-1.5 h-7 w-7"
															color="#93C5FD"
															fill="#93C5FD"
														/>
														<span className="w-8 text-white/80">
															{nightTemp}°
														</span>
													</div>
												</div>
											</div>
										</div>
									);
								})}
							</div>
						)}
					</div>
				)}

			{/* Weather Details */}
			{showDetails && (
				<div className="mt-4">
					<button
						type="button"
						onClick={() => setDetailsExpanded(!detailsExpanded)}
						className="mb-2 flex w-full items-center justify-between text-sm font-normal text-white"
					>
						<span>Additional Information</span>
						<svg
							className={cn(
								"h-4 w-4 transition-transform",
								detailsExpanded && "rotate-180",
							)}
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
							aria-hidden="true"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={2}
								d="M19 9l-7 7-7-7"
							/>
						</svg>
					</button>
					{detailsExpanded && (
						<div className="mt-2 grid grid-cols-3 gap-2">
							{[
								{
									icon: (
										<FastWindIcon
											className="h-6 w-6"
											color={weatherTheme.colorCode}
										/>
									),
									label: "Wind",
									value: `${weatherData.wind.speed} m/s`,
									tooltipText: "Wind speed in meters per second",
								},
								{
									icon: (
										<DropletIcon
											className="h-6 w-6"
											color={weatherTheme.colorCode}
										/>
									),
									label: "Humidity",
									value: `${weatherData.main.humidity}%`,
									tooltipText: "Amount of water vapor in the air",
								},
								...(weatherData.visibility
									? [
											{
												icon: (
													<VisionIcon
														className="h-6 w-6"
														color={weatherTheme.colorCode}
													/>
												),
												label: "Visibility",
												value: `${(weatherData.visibility / 1000).toFixed(
													1,
												)} km`,
												tooltipText: "Maximum visibility distance",
											},
										]
									: []),
								{
									icon: (
										<CloudIcon
											className="h-6 w-6"
											color={weatherTheme.colorCode}
										/>
									),
									label: "Pressure",
									value: `${weatherData.main.pressure} hPa`,
									tooltipText: "Atmospheric pressure in hectopascals",
								},
								{
									icon: (
										<HugeiconsIcon
											icon={SunriseIcon}
											size={24}
											color={weatherTheme.colorCode}
										/>
									),
									label: "Sunrise",
									value: sunriseTime,
									tooltipText: "Time when the sun rises above the horizon",
								},
								{
									icon: (
										<HugeiconsIcon
											icon={SunsetIcon}
											size={24}
											color={weatherTheme.colorCode}
										/>
									),
									label: "Sunset",
									value: sunsetTime,
									tooltipText: "Time when the sun disappears below the horizon",
								},
							].map((detail, index) => (
								<WeatherDetailItem
									key={index}
									icon={detail.icon}
									label={detail.label}
									value={detail.value}
									tooltipText={detail.tooltipText}
									highlight={weatherTheme.colorCode}
								/>
							))}
						</div>
					)}
				</div>
			)}
		</div>
	);
};

"use client";

import type React from "react";
import type { ReactNode } from "react";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@/components/ui/tooltip";

export interface WeatherDetailItemProps {
	icon: ReactNode;
	label: string;
	value: string;
	tooltipText?: string;
	highlight: string;
}

export const WeatherDetailItem: React.FC<WeatherDetailItemProps> = ({
	icon,
	label,
	value,
	tooltipText,
	highlight,
}) => {
	return (
		<div className="flex flex-col items-start rounded-2xl bg-black/10 p-2 px-3 backdrop-blur-sm">
			<TooltipProvider>
				<Tooltip>
					<TooltipTrigger asChild>
						<div className="flex w-full cursor-help flex-row items-start justify-between">
							<div className="flex flex-col">
								<div className="w-fit text-sm text-white/70">{label}</div>
								<div className="w-fit font-medium text-white">{value}</div>
							</div>
							<div style={{ color: highlight }}>{icon}</div>
						</div>
					</TooltipTrigger>
					{tooltipText && (
						<TooltipContent>
							<p>{tooltipText}</p>
						</TooltipContent>
					)}
				</Tooltip>
			</TooltipProvider>
		</div>
	);
};

import type React from "react";

export interface IconProps extends React.SVGProps<SVGSVGElement> {
	color?: string;
}

export const CloudAngledZapIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Storm"
		role="img"
		{...props}
	>
		<path
			d="M7 17.5C4.23858 17.5 2 15.336 2 12.6667C2 10.1537 3.98398 8.0886 6.52042 7.85528M17.5 17.5C19.9853 17.5 22 15.5524 22 13.15C22 10.7476 19.9853 8.8 17.5 8.8C17.4925 8.8 17.485 8.80002 17.4776 8.80005M17.4776 8.80005C17.4924 8.64084 17.5 8.47961 17.5 8.31667C17.5 5.38035 15.0376 3 12 3C9.12324 3 6.76233 5.135 6.52042 7.85528M17.4776 8.80005C17.3753 9.89668 16.9286 10.8973 16.2428 11.7M6.52042 7.85528C6.67826 7.84076 6.83823 7.83333 7 7.83333C8.12582 7.83333 9.16474 8.19302 10.0005 8.8"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
		<path
			d="M12.5784 14L10.8043 16.6838C10.5668 17.0431 10.4481 17.2227 10.5217 17.3614C10.5952 17.5 10.8093 17.5 11.2375 17.5H12.7625C13.1907 17.5 13.4048 17.5 13.4783 17.6386C13.5519 17.7773 13.4332 17.9569 13.1957 18.3162L11.4216 21"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const CloudLittleRainIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Light Rain"
		role="img"
		{...props}
	>
		<path
			d="M12.0011 13.5V15M9 16.5V18M15 16.5V18M6.5 19.5V21M17.5 19.5V21M12 19.5V21"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M17.4776 8.89801L17.5 8.89795C19.9853 8.89795 22 10.8784 22 13.3214C22 14.8551 21.206 16.2065 20 17M17.4776 8.89801C17.4924 8.73611 17.5 8.57216 17.5 8.40646C17.5 5.42055 15.0376 3 12 3C9.12324 3 6.76233 5.17106 6.52042 7.93728M17.4776 8.89801C17.3753 10.0132 16.9286 11.0307 16.2428 11.8469M6.52042 7.93728C3.98398 8.17454 2 10.2745 2 12.8299C2 14.4378 2.78565 15.8652 4 16.7619M6.52042 7.93728C6.67826 7.92251 6.83823 7.91496 7 7.91496C8.12582 7.91496 9.16474 8.28072 10.0005 8.89795"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const CloudAngledRainIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Rain"
		role="img"
		{...props}
	>
		<path
			d="M12.5 15L11.5 17M17 15L16 17M13.5 19L12.5 21M8 15L7 17M9 19L8 21"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
		<path
			d="M17.4776 8.89801L17.5 8.89795C19.9853 8.89795 22 10.8784 22 13.3214C22 14.8551 21.206 16.2065 20 17M17.4776 8.89801C17.4924 8.73611 17.5 8.57216 17.5 8.40646C17.5 5.42055 15.0376 3 12 3C9.12324 3 6.76233 5.17106 6.52042 7.93728M17.4776 8.89801C17.3753 10.0132 16.9286 11.0307 16.2428 11.8469M6.52042 7.93728C3.98398 8.17454 2 10.2745 2 12.8299C2 14.4378 2.78565 15.8652 4 16.7619M6.52042 7.93728C6.67826 7.92251 6.83823 7.91496 7 7.91496C8.12582 7.91496 9.16474 8.28072 10.0005 8.89795"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const CloudSnowIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Snow"
		role="img"
		{...props}
	>
		<path
			d="M17.4776 8.7803L17.5 8.78025C19.9853 8.78025 22 10.7212 22 13.1154C22 14.8176 20.9817 16.2906 19.5 17M17.4776 8.7803C17.4924 8.62164 17.5 8.46095 17.5 8.29856C17.5 5.37225 15.0376 3 12 3C9.12324 3 6.76233 5.12773 6.52042 7.83875M17.4776 8.7803C17.3753 9.8732 16.9286 10.8704 16.2428 11.6704M6.52042 7.83875C3.98398 8.07128 2 10.1293 2 12.6338C2 14.566 3.18102 16.2326 4.88559 17M6.52042 7.83875C6.67826 7.82428 6.83823 7.81688 7 7.81688C8.12582 7.81688 9.16474 8.17534 10.0005 8.78025"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
		<path
			d="M11.9978 16.9974L12.0022 17.0052M15.9955 15L16 15.0078M8 15L8.00449 15.0078M15.9955 18.9948L16 19.0026M8 18.9948L8.00449 19.0026M11.9978 20.9922L12.0022 21"
			stroke="currentColor"
			strokeWidth="2"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const CloudFogIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Fog"
		role="img"
		{...props}
	>
		<path
			d="M17.4776 9.00005C17.485 9.00002 17.4925 9 17.5 9C19.9853 9 22 11.0147 22 13.5C22 15.9853 19.9853 18 17.5 18H7C4.23858 18 2 15.7614 2 13C2 10.4003 3.98398 8.26407 6.52042 8.0227M17.4776 9.00005C17.4924 8.83536 17.5 8.66856 17.5 8.5C17.5 5.46243 15.0376 3 12 3C9.12324 3 6.76233 5.20862 6.52042 8.0227M17.4776 9.00005C17.3753 10.1345 16.9286 11.1696 16.2428 12M6.52042 8.0227C6.67826 8.00768 6.83823 8 7 8C8.12582 8 9.16474 8.37209 10.0005 9"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
		<path
			d="M6 21H8"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M11 21H13"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M16 21H18"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
	</svg>
);

export const CloudIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Cloud"
		role="img"
		{...props}
	>
		<path
			d="M17.4776 10.0001C17.485 10 17.4925 10 17.5 10C19.9853 10 22 12.0147 22 14.5C22 16.9853 19.9853 19 17.5 19H7C4.23858 19 2 16.7614 2 14C2 11.4003 3.98398 9.26407 6.52042 9.0227M17.4776 10.0001C17.4924 9.83536 17.5 9.66856 17.5 9.5C17.5 6.46243 15.0376 4 12 4C9.12324 4 6.76233 6.20862 6.52042 9.0227M17.4776 10.0001C17.3753 11.1345 16.9286 12.1696 16.2428 13M6.52042 9.0227C6.67826 9.00768 6.83823 9 7 9C8.12582 9 9.16474 9.37209 10.0005 10"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const FastWindIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Wind"
		role="img"
		{...props}
	>
		<path
			d="M2 5.94145C5.5 9.37313 10.5755 7.90241 11.7324 5.94145C11.9026 5.65301 12 5.31814 12 4.96096C12 3.87795 11.1046 3 10 3C8.89543 3 8 3.87795 8 4.96096"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M17 8.92814C17 7.31097 18.1193 6 19.5 6C20.8807 6 22 7.31097 22 8.92814C22 9.6452 21.7799 10.3021 21.4146 10.8111C19.3463 14.1915 9.2764 12.9164 4 11.8563"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M13.0854 19.8873C13.2913 20.5356 13.8469 21 14.5 21C15.3284 21 16 20.2528 16 19.331C16 19.0176 15.9224 18.7244 15.7873 18.4738C14.4999 15.9925 7.99996 14.3239 2 18.7746"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M19 15.5H21"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const Sun03Icon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Sun"
		role="img"
		{...props}
	>
		<path
			d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"
			stroke="currentColor"
			strokeWidth="1.5"
		/>
		<path
			d="M12 2V3.5M12 20.5V22M19.0708 19.0713L18.0101 18.0106M5.98926 5.98926L4.9286 4.9286M22 12H20.5M3.5 12H2M19.0713 4.92871L18.0106 5.98937M5.98975 18.0107L4.92909 19.0714"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
	</svg>
);

export const Moon02Icon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Moon"
		role="img"
		{...props}
	>
		<path
			d="M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const Tornado02Icon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Tornado"
		role="img"
		{...props}
	>
		<path
			d="M9.01654 6.15879C10.9944 4.77262 17.9171 3.55944 18.906 6.15879C20.3862 10.0497 3.87743 12.3805 5.06077 6.15849C5.55508 3.55944 10.5002 2 12.9725 2"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M18 11.1934C15.423 13.0706 8.5771 13.8244 6 11.7816"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M14.0219 21.6941C13.0436 21.8816 12.0077 21.989 11 21.9995"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M7 15.166C9.07731 16.0444 12.3835 15.9574 15 15.2812"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
		<path
			d="M8.03906 18.5039C9.49304 18.8598 11.2867 18.8854 12.9988 18.6635"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
		/>
	</svg>
);

export const DropletIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Droplet"
		role="img"
		{...props}
	>
		<path
			d="M3.5 13.678C3.5 9.49387 7.08079 5.35907 9.59413 2.97222C10.9591 1.67593 13.0409 1.67593 14.4059 2.97222C16.9192 5.35907 20.5 9.49387 20.5 13.678C20.5 17.7804 17.2812 22 12 22C6.71878 22 3.5 17.7804 3.5 13.678Z"
			stroke="currentColor"
			strokeWidth="1.5"
		/>
		<path
			d="M16 14C16 16.2091 14.2091 18 12 18"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</svg>
);

export const VisionIcon: React.FC<IconProps> = (props) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 24 24"
		width={24}
		height={24}
		color={"#000000"}
		fill={"none"}
		aria-label="Vision"
		role="img"
		{...props}
	>
		<path
			d="M2.5 8.18677C2.60406 6.08705 2.91537 4.77792 3.84664 3.84664C4.77792 2.91537 6.08705 2.60406 8.18677 2.5M21.5 8.18677C21.3959 6.08705 21.0846 4.77792 20.1534 3.84664C19.2221 2.91537 17.9129 2.60406 15.8132 2.5M15.8132 21.5C17.9129 21.3959 19.2221 21.0846 20.1534 20.1534C21.0846 19.2221 21.3959 17.9129 21.5 15.8132M8.18676 21.5C6.08705 21.3959 4.77792 21.0846 3.84664 20.1534C2.91537 19.2221 2.60406 17.9129 2.5 15.8132"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
		<path
			d="M19.6352 11.3178C19.8784 11.6224 20 11.7746 20 12C20 12.2254 19.8784 12.3776 19.6352 12.6822C18.5423 14.0504 15.7514 17 12 17C8.24862 17 5.45768 14.0504 4.36483 12.6822C4.12161 12.3776 4 12.2254 4 12C4 11.7746 4.12161 11.6224 4.36483 11.3178C5.45768 9.9496 8.24862 7 12 7C15.7514 7 18.5423 9.9496 19.6352 11.3178Z"
			stroke="currentColor"
			strokeWidth="1.5"
		/>
		<path
			d="M14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12Z"
			stroke="currentColor"
			strokeWidth="1.5"
		/>
	</svg>
);