Weather/app/components/WeatherDisplay.tsx

import React from 'react';
import {
    Cloud,
    CloudDrizzle,
    CloudFog,
    CloudLightning, CloudMoon,
    CloudRain,
    CloudSnow,
    CloudSun,
    MapPin, Moon, Sun,
    Thermometer,
    ThermometerSun
} from 'lucide-react';

import { formatTemperature } from "@/lib/utils";
import { useWeatherStore } from '@/store/weatherStore';
interface WeatherIconProps {
    description: string;
    isDay: string;
    className?: string;
}

/**
 * Returns the appropriate weather icon based on description and time of day
 */
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('rain') || desc.includes('雨')) {
        return desc.includes('heavy') || desc.includes('暴')
            ? <CloudRain className={className} />
            : <CloudDrizzle className={className} />;
    }
    if (desc.includes('snow') || desc.includes('雪')) return <CloudSnow className={className} />;
    if (desc.includes('thunder') || desc.includes('storm') || desc.includes('雷')) return <CloudLightning className={className} />;
    if (desc.includes('fog') || desc.includes('mist') || desc.includes('haze') || desc.includes('雾') || desc.includes('霾')) return <CloudFog className={className} />;
    if (desc.includes('partly') || desc.includes('scattered') || desc.includes('多云')) {
        return isDaytime ? <CloudSun className={className} /> : <CloudMoon className={className} />;
    }
    if (desc.includes('cloudy') || desc.includes('overcast') || desc.includes('阴')) return <Cloud className={className} />;
    if (desc.includes('clear') || desc.includes('sunny') || desc.includes('晴')) {
        return isDaytime ? <Sun className={className} /> : <Moon 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-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
            <div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
            <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
            <div className="realtive z-10 ">
                <div className="flex items-start justify-between mb-6">
                    <div>
                        <h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
                        <div className="text-white w-3 h-3">
                            <MapPin className="w-3 h-3 text-white" />
                            <span className="text-white text-sm">{currentWeather.location.country}</span>
                        </div>
                        <div className="text-white ">
                            <WeatherIcon 
                                description={currentWeather.current.weather_descriptions[0]}
                                isDay={currentWeather.current.is_day}
                            />
                        </div>
                    </div>
                    <div className="flex items-baseline gap-2 mb-2">
                        <span className="text-6xl font-light text-white">
                            {formatTemperature(currentWeather.current.temperature)}
                        </span>
                        <span className="text-2xl text-white">
                            °C
                        </span>
                    </div>
                    <p className="text-lg text-white mb-2 capitalize font-medium">
                        {currentWeather.current.weather_descriptions[0]}
                    </p>
                    <div className="flex items-center gap-2 text-white text-sm">
                        <ThermometerSun className="w-4 h-4"/>
                        <span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
                    </div>
                </div>
            </div>
        </div>
    )
}