import { Typography } from "@mui/material";
import moment from "moment";
import { useEffect, useState } from "react";

interface Props {
  /** RFC3339 timestamp string */
  timestamp: string;
}

/**
 * Displays a timestamp as relative time (e.g. "a minute ago", "5 seconds ago").
 * Uses a subtle, muted typography style.
 * Refreshes every 60 seconds to keep the relative text current.
 */
export default function RelativeTimestamp({ timestamp }: Props) {
  const [, setTick] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setTick((t) => t + 1), 60000);
    return () => clearInterval(interval);
  }, []);

  const date = moment(timestamp);
  if (!date.isValid()) return null;

  return (
    <Typography
      variant="caption"
      sx={{
        opacity: 0.7,
        fontSize: "0.7rem",
        fontStyle: "italic",
      }}
    >
      {date.fromNow()}
    </Typography>
  );
}
