import { format } from "date-fns";
import { toZonedTime } from "date-fns-tz";

export default function WeatherWidget({
  temperature,
}: {
  temperature: number;
}) {
  const timeZone = "Asia/Dubai";
  const newDate = new Date();
  const dubaiDate = toZonedTime(newDate, timeZone);

  const day = format(dubaiDate, "EEE");
  const month = format(dubaiDate, "MMM");
  const date = format(dubaiDate, "d");
  const time = format(dubaiDate, "h:mm");
  const dayPart = format(dubaiDate, "a");

  return (
    <div className="absolute left-[2.222vw] top-[2.222vw] rounded-2xl space-y-4 min-w-[200px] w-[8.333vw] p-4 font-medium text-white bg-black bg-opacity-40 pointer-events-none max-[1440px]:hidden backdrop-blur-2xl">
      <div>
        <div className="flex justify-between">
          <p>{day}</p>
          <p>{time}</p>
        </div>
        <div className="flex justify-between opacity-60">
          <p>
            {date} {month}
          </p>
          <p>{dayPart}</p>
        </div>
      </div>
      <hr className="-mx-4 border-white" />
      <p className="text-[32px]">{temperature}°C</p>
    </div>
  );
}