export default function WeatherWidget({
  temperature,
}: {
  temperature: number;
}) {
  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}`;

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