"use client";

import { useSyncExternalStore } from "react";

function getTime(withSeconds: boolean) {
  const now = new Date();
  return now.toLocaleTimeString(
    [],
    withSeconds
      ? { hour: "2-digit", minute: "2-digit", second: "2-digit" }
      : { hour: "2-digit", minute: "2-digit" }
  );
}

function subscribe(callback: () => void) {
  const id = window.setInterval(callback, 1000);
  return () => window.clearInterval(id);
}

export default function Clock({
  className,
  withSeconds = false,
}: {
  className?: string;
  withSeconds?: boolean;
}) {
  const text = useSyncExternalStore(
    subscribe,
    () => getTime(withSeconds),
    () => ""
  );

  return (
    <span className={className} suppressHydrationWarning>
      {text}
    </span>
  );
}