import { Tooltip } from "@mui/material";
import {
  formatDateTime,
  formatDate,
  timeDiff,
  timeDiffFromNow,
} from "../utils/DateUtils";

export function TimeWidget(p: {
  time?: number;
  isDuration?: boolean;
  showDate?: boolean;
}): React.ReactElement {
  if (!p.time) return <></>;
  return (
    <Tooltip
      title={formatDateTime(
        p.isDuration ? new Date().getTime() / 1000 - p.time : p.time
      )}
      arrow
    >
      <span>
        {p.showDate
          ? formatDate(p.time)
          : p.isDuration
          ? timeDiff(0, p.time)
          : timeDiffFromNow(p.time)}
      </span>
    </Tooltip>
  );
}