import { memo } from "react";

export interface AbsoluteDateProps {
	/**
	 * 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;
	long?: boolean;
}

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

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

export default memo(function AbsoluteDate(props: AbsoluteDateProps) {
	const date = new Date(props.value * 1000);
	const long = absoluteDateFormatter.format(date);
	return (
		<time dateTime={date.toISOString()} title={long}>
			{props.long ? long : shortDateFormatter.format(date)}
		</time>
	);
});