test/1114/app/components/weather/WeatherDisplay.tsx

import { useWeatherStore } from "@/store/weatherStore";
import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun } from "lucide-react";

interface WeatherIconProps {
    description: string;
    isDay: string;
    className?: string;
}

function WeatherIcon({ description, isDay, className='w-16 h-16 md:w-20 md:h-20' }: WeatherIconProps) {
    const desc = description.toLowerCase();
    const isDaytime = isDay === 'yes';

    if(desc.includes('雨') || desc.includes('rain')) return <CloudRain className={className}/>
    if(desc.includes('雪') || desc.includes('snow')) return <CloudSnow className={className}/>
    if(desc.includes('雷') || desc.includes('thunderstorm')) return <CloudLightning className={className}/>
    if(desc.includes('fog') || desc.includes('雾')) return <CloudFog className={className}/>
    if(desc.includes('cloudy') || desc.includes('阴') || desc.includes('overcast')) return <Cloud className={className}/>
    if(desc.includes('heavy') || desc.includes('暴')) return <CloudDrizzle className={className}/>
    if(desc.includes('晴') || desc.includes('clear') || desc.includes('sunny')) return (
        isDaytime ? <Sun className={className}/> : <Moon className={className}/>
    )
    if(desc.includes('scattered') || desc.includes('多云') || desc.includes('partial')) return (
        isDaytime ? <CloudSun className={className}/> : <CloudMoon className={className}/>
    )
    return isDaytime ? <Sun className={className}/> : <Moon className={className}/>
}

export function WeatherDisplay(){
    const {currentWeather} = useWeatherStore();
    if (!currentWeather) return null;

    return (
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#3498db] to-[#2980b9] via-cyan-500 p-6 mb-4">
            <div className="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent"></div>
            <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
            <div className="relative z-10">
                <div className="flex items-start justify-between mb-6">
                    <div>
                        <h2 className="text-3xl font-semibold mb-2 text-white">{currentWeather.location.name}</h2>
                        <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-white/20 backdrop-blur-sm">
                            <MapPin className="w-3 h-3 text-white/90"/>
                            <div className="text-white text-sm">{currentWeather.location.country}</div>
                        </div>
                    </div>
                    <div className="text-white/90">
                        {/* <WeatherIcon description={currentWeather.current.} isDay={currentWeather.current.is_day} className="w-12 h-12 md:w-16 md:h-16"/> */}
                    </div>
                </div>
            </div>
        </div>
    )
}