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

const 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) => {
      const temp = Math.round(data[0].main.temp);
      setTemperature(temp);
    });
  });

  return (
    <div className="absolute top-[73.5px] left-4 bg-black rounded-2xl z-50 text-white bg-opacity-40 w-[144px] pt-4">
      <div className="flex justify-between px-4 text-[14px] font-medium">
        <p>{day}</p>
        <p>{formattedTime}</p>
      </div>
      <div className="flex justify-between px-4 text-[12px] opacity-60  border-b font-medium pb-4">
        <p>
          {date.getDate()} {month}
        </p>
        <p>{dayPart}</p>
      </div>
      <div className="px-4 items-center flex pb-2 pt-2">
        <p className="text-[32px] font-medium">{temperature}°C</p>
      </div>
    </div>
  );
};

export default WeatherWidget;