Weather/app/components/WeatherCard.tsx

import { useWeatherStore } from "@/store/weatherStore";
import { Cloud } from "lucide-react";
import {WeatherDisplay  } from '@/components/WeatherDisplay'
import { WeatherSearchForm } from "./WeatherSearchForm";
import { WeatherDetailsGrid } from "./WeatherDetailsGird";

export function WeatherCard(){
    const{ currentWeather} = useWeatherStore();
    //样式待修改
    return (
        <div className ="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-800/80 
        backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 shadow-2xl shadow-slate-200/50
        dark:shadow-slate-900/50 transition-all duration-300">
            <WeatherSearchForm />
            {currentWeather ? (
            <div className="p-6"> 
                <WeatherDisplay />
                <WeatherDetailsGrid />
            </div>
            ) :(
                <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
                    <div className="relative mb-6">
                        <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
                            <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 flex items-center justify-center">
                                <Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
                            </div>
                    </div>
                    <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
                        暂无天气数据
                    </h3>
                        <p className="text-sm text-slate-500 dark:text-slate-400">
                            请搜索城市查看实时天气信息
                        </p>
                </div>
      )}
        </div>
    );
}