import { useAdminTime } from "@/shared/hooks/useAdminTime.js";

export function TimeText({ className, component: Component = "span", value }) {
  const { formatDateTime, timeZoneLabel } = useAdminTime();
  const text = formatDateTime(value);

  return (
    <Component className={className} title={text === "-" ? undefined : timeZoneLabel}>
      {text}
    </Component>
  );
}

export function TimeRangeText({ className, component: Component = "span", end, separator = " - ", start }) {
  const { formatRange, timeZoneLabel } = useAdminTime();
  const text = formatRange(start, end, separator);

  return (
    <Component className={className} title={text === "-" ? undefined : timeZoneLabel}>
      {text}
    </Component>
  );
}
