"use client";

import { useState, useEffect, useContext } from "react";
import QuickLinks from "./QuickLinks";
import { DataContext } from "@/lib/data-context";

export default function DateWeatherLinksWelcome() {
  const [date, setDate] = useState(new Date());
  const data = useContext(DataContext);

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="glass rounded-lg p-6 shadow-lg">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
            {date.toLocaleDateString(undefined, {
              weekday: "long",
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            {date.toLocaleTimeString()}
          </p>
        </div>
        <div className="text-right">
          <p className="text-4xl font-bold text-gray-800 dark:text-gray-100">
            {data?.weather
              ? Math.round(data.weather.temperature * (9 / 5) + 32) + "°F"
              : "--"}
          </p>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            {data?.weather ? data.weather.description : "--"}
          </p>
        </div>
      </div>
      <br />
      <QuickLinks />
    </div>
  );
}