"use client"

import { useSyncExternalStore } from "react"

const formatter = new Intl.DateTimeFormat("de-DE", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  timeZone: "Europe/Berlin",
})

function subscribe(onChange: () => void) {
  const interval = window.setInterval(onChange, 1000)
  return () => window.clearInterval(interval)
}

/** Local time in Steinfurt, ticking every second. */
export function LiveClock({ className }: { className?: string }) {
  const time = useSyncExternalStore(
    subscribe,
    () => formatter.format(new Date()),
    () => "--:--:--"
  )

  return (
    <time className={className} suppressHydrationWarning>
      {time}
    </time>
  )
}