import { Tooltip } from "antd";
import dayjs from '../../../util/day.js';

import React, { useEffect, useState } from "react";

export default function TimeAgoFormatter(props) {
  const [timestampString, setTimestampString] = useState("");
  const m = dayjs(props.children);
  useEffect(() => {
    const timer = setInterval(() => setTimestampString(m.fromNow()), 15000);
    setTimestampString(m.fromNow());
    return () => clearInterval(timer);
  }, [m]);

  return props.children ? (
    <Tooltip placement="top" title={m.format("MM/DD/YYYY hh:mm:ss A")}>
      {timestampString}
    </Tooltip>
  ) : null;
}
