Weather/app/components/WeatherDetailsGird.tsx

import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
import { useWeatherStore } from "@/store/weatherStore";

interface WeatherDetailsGridProps {
  icon: React.ReactNode;
  label: string;
  value: string;
  subtitle?: string;
}

function WeatherInfoItem({ icon, label, value, subtitle }: WeatherDetailsGridProps) {
    return(
        <div className="group rounded-xl bg-slate-50/50 border border-slate-200 p-4 hover:bg-slate-100/80 hover:border-slate-300 transition-all duration-300">
            <div className="flex items-start gap-2">
                <div className="flex-shrink-0 w-9 h-9 rounded-full bg-white flex items-center justify-center group-hover:scale-100 transition-tramsform duration-300">
                    {icon}
                </div>
                <div className="flex-1 min-w-0">
                    <p className="text-sm text-slate-500">{label}</p>
                    <p className="text-slate-900 text-sm font-semibold">{value}</p>
                    {subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
                </div>
            </div>
        </div>
    )
}

export function WeatherDetailsGrid(){
    const {currentWeather} = useWeatherStore();
    if(!currentWeather) return null;
    return(
        <div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4">
                <WeatherInfoItem icon={<Droplets  className="w-4 h-4 text-blue-500"/>} label="湿度" value={`${currentWeather.current.humidity}%`} />
                <WeatherInfoItem icon={<Wind  className="w-4 h-4 text-blue-500"/>} label="风速" value={`${currentWeather.current.wind_speed} m/s`} />
                <WeatherInfoItem icon={<Gauge  className="w-4 h-4 text-blue-500"/>} label="气压" value={`${currentWeather.current.pressure} hPa`} />
                <WeatherInfoItem icon={<Cloud  className="w-4 h-4 text-blue-500"/>} label="云量" value={`${currentWeather.current.cloudcover}%`} />
                <WeatherInfoItem icon={<ThermometerSun  className="w-4 h-4 text-blue-500"/>} label="紫外线" value={`${currentWeather.current.uv_index} UV`} />
            </div>
            <div className="pt-4 border-t border-slate-200">
                <div className="flex items-center justify-between text-sm mb-2">
                    <div className="flex items-center gap-2 text-slate-600">
                        <Droplets className="w-4 h-4 text-blue-500"/>
                        <span>降水量:\
                            <span className="font-semibold">
                                {currentWeather.current.precip} mm
                            </span>
                        </span>
                    </div>
                        <span className=" text-slate-600">
                            {currentWeather.current.is_day === "yes" ? "白天" : "夜晚"}
                        </span>
                    </div>
                    <p className="text-xs text-center text-slate-500">
                        观测时间: {currentWeather.current.observation_time}
                    </p>
            </div>
        </div>
    )
}