"use client";

import { useEffect, useState } from "react";
import { formatLocalTimestamp } from "@/lib/local-date-range";

type Props = {
  value: string | null;
  className?: string;
};

/**
 * Renders timestamps in the browser's local timezone.
 * Avoids SSR/client hydration mismatch by filling in after mount.
 */
export function LocalTimestamp({ value, className }: Props) {
  const [label, setLabel] = useState("—");

  useEffect(() => {
    setLabel(formatLocalTimestamp(value));
  }, [value]);

  if (!value) {
    return <span className={className}>—</span>;
  }

  return (
    <time dateTime={value} className={className} suppressHydrationWarning>
      {label}
    </time>
  );
}