import React from 'react';
import {
    Cloud,
    CloudDrizzle,
    CloudFog,
    CloudLightning, CloudMoon,
    CloudRain,
    CloudSnow,
    CloudSun,
    MapPin, Moon, Sun,
    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} />;
}