import { memo } from "react";

export interface AbsoluteTimestampProps {
	/**
	 * Server-sent Timestamp that was fetched from the backend. **Unix time in seconds**.
	 * @remarks We use a `number` instead of `Date` because `Date`s are objects and would cause unnecessary re-renders. `number`s are easier to memoize and to compare.
	 */
	value: number;
}

const shortFormatter = new Intl.DateTimeFormat(["de", "en"], {
	dateStyle: "medium",
	timeStyle: "short",
});

const absoluteFormatter = new Intl.DateTimeFormat(["de", "en"], {
	dateStyle: "long",
	timeStyle: "long",
});

export default memo(function AbsoluteTimestamp(props: AbsoluteTimestampProps) {
	const date = new Date(props.value * 1000);
	return (
		<time
			dateTime={date.toISOString()}
			title={absoluteFormatter.format(date)}
		>
			{shortFormatter.format(date)}
		</time>
	);
});