import { useEffect, useState } from "react"

import type { WidgetProps } from "./widgets"

/**
 * Local time and date, read from the browser rather than from the graph.
 *
 * The tick is a plain one-second interval and the formatting is the browser's
 * own locale, so there is no 12/24-hour setting to carry.
 */
export function ClockWidget(_props: WidgetProps) {
  const [now, setNow] = useState(() => new Date())

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

  return (
    <div className="min-w-0">
      <p className="dui-clock truncate" data-testid="clock-time">
        {now.toLocaleTimeString(undefined, {
          hour: "2-digit",
          minute: "2-digit",
        })}
      </p>
      <p className="truncate text-muted-foreground">
        {now.toLocaleDateString(undefined, {
          weekday: "long",
          day: "numeric",
          month: "long",
        })}
      </p>
    </div>
  )
}