import { toast } from "sonner"
import { Loader2 } from "lucide-react"
import { useEffect } from "react"
import { useWeatherStore } from "../store/weatherStore"
import { WeatherCard } from "@/components/WeatherCard"
export function meta() {
    return [
        { title: "天气查询页面" },
        { name: "description", content: "查询天气信息" }
    ]
}
export function Weather() {
    const { currentWeather, isLoading, error, setError } = useWeatherStore()
    useEffect(() => {
        if (error) {
            toast.error(error)
            setError("")
        }
    }, [ErrorEvent, setError])
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <div className="flex flex-col items-center justify-center">
                <header className="flex flex-col items-center justify-center">
                    <h1 className="text-4xl font-bold">天气查询</h1>
                    <p className="text-sm">实时天气</p>
                </header>
                {isLoading && !currentWeather && (
                    <div className="flex flex-col items-center justify-center">
                        <div className="flex flex-col items-center justify-center"></div>
                        <div className="flex flex-col items-center justify-center">
                            <div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-gray-900">
                            </div>
                            <div className="text-gray-900 text-lg font-bold">
                                <Loader2 className="h-10 w-10 animate-spin" />
                            </div>
                        </div>
                        <p className="text-gray-900 text-lg font-bold">正在加载...</p>
                    </div>
                )
                }
                {isLoading || currentWeather ? (
                    <div className="flex flex-col items-center justify-center">
                        <WeatherCard />
                    </div>
                ) : null}
            </div>
        </div>
    )
}