// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useEffect, useState, type ComponentProps } from "react";
export interface TimeZone {
  zone: string;
  label: string;
}
export type RelativeTimeProps = ComponentProps<"div"> & {
  time?: Date;
  zones: readonly TimeZone[];
  locale?: string;
  interval?: number;
};
export function RelativeTime({
  time,
  zones,
  locale = "en-US",
  interval = 60000,
  className = "",
  ...props
}: RelativeTimeProps) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    if (time) return;
    const timer = setInterval(
      () => setNow(new Date()),
      Math.max(1000, interval),
    );
    return () => clearInterval(timer);
  }, [time, interval]);
  const current = time ?? now;
  return (
    <div className={`ynr-relative-time ${className}`} {...props}>
      {zones.map(({ zone, label }) => (
        <div key={zone}>
          <span>{label}</span>
          <time dateTime={current.toISOString()}>
            {new Intl.DateTimeFormat(locale, {
              timeZone: zone,
              dateStyle: "medium",
              timeStyle: "short",
            }).format(current)}
          </time>
        </div>
      ))}
    </div>
  );
}