import Image from "next/image";
import WeatherSprite from "@/components/weather/animated-sprite";
import {Separator} from "@/components/ui/separator";
import {ChevronsLeftRightEllipsis, SeparatorVertical} from "lucide-react";

export default function HomePage() {
  return (<main className="flex flex-row w-full h-screen p-2">
    <div className={"flex flex-col justify-center items-center gap-1 h-fit w-fit text-xl px-3 py-2 font-bold rounded-xl relative bg-background"}>
      <WeatherSprite
        weather={3}
        title={"Maintenant"}
        className={""}
        indicator={{type: "slippery"}}
      />
      <Separator className={"h-1 rounded-2xl"}/>
      <div className={"my-3 p-2 flex flex-col items-center"}>
        <h2 className={"mb-2"}>Températures</h2>
        <div className={"flex flex-row justify-center items-center gap-1"}>
          <div>
            <p className={"text-red-300"}>Max</p>
            <p className={"text-blue-300"}>Min</p>
          </div>
          <ChevronsLeftRightEllipsis  className={"w-12 h-12 rotate-90"}/>
          <div>
            <p className={"text-red-300"}>19,6°C</p>
            <p className={"text-blue-300"}>11,2°C</p>
          </div>
        </div>
      </div>
      <Separator className={"h-1 rounded-2xl"}/>
    </div>
  </main>);
}