import { useEffect, useState } from "react";
import { getWeather } from "../api/weather";

export default function WeatherWidget() {
  const [temperature, setTemperature] = useState(0);

  const date = new Date();

  const day = date.toLocaleDateString("en-US", {
    weekday: "short",
  });
  const month = date.toLocaleDateString("en-US", {
    month: "short",
  });

  const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const dayPart = `${date.getHours() >= 12 ? "PM" : "AM"}`;
  const formattedTime = `${hours}:${minutes}`;

  useEffect(() => {
    getWeather().then((data) => {
      setTemperature(Math.round(data));
    });
  }, []);

  return (
    <div className="z-20 fixed left-10 top-10 rounded-2xl space-y-4 min-w-50 w-[7.5vw] p-4 font-medium text-white bg-black/40 pointer-events-none max-[1440px]:hidden">
      <div>
        <div className="flex justify-between">
          <p>{day}</p>
          <p>{formattedTime}</p>
        </div>
        <div className="flex justify-between opacity-60">
          <p>
            {date.getDate()} {month}
          </p>
          <p>{dayPart}</p>
        </div>
      </div>
      <hr className="border-white -mx-4" />
      <p className="text-[32px]">{temperature}°C</p>
    </div>
  );
}
