import { WeathersearchForm } from "./WeatherSearchForm.tsx";
import { WeatherDisplay } from "./WeatherDisplay.tsx";
import { WeatherDetailsGrid } from "./WeatherDetailsGrid.tsx";
import { useWeatherStore } from "./WeatherStore.tsx";
import Cloud  from "../../../assets/cloud.svg";

export function WeatherCard() {
  const { currentWeather } = useWeatherStore();

  return (
    <div>
      <WeathersearchForm />
      {currentWeather ? (
        <div className="P-4">
          <WeatherDisplay />
          <WeatherDetailsGrid />
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center h-full">
          <div className="animate-spin">
            <div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
            <div className="h-10 w-10">
              <Cloud/> 
            </div>
          </div>
          <h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
          <p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
        </div>
        
      )}
    </div>
  );
}