<script lang="ts">
	import { compactRelativeTime, formatDateTime, relativeTime } from "#lib/format.ts";

	interface Props {
		value: string | Date;
		variant?: "compact" | "full";
		class?: string;
	}

	let { value, variant = "compact", class: className }: Props = $props();

	const text = $derived(variant === "compact" ? compactRelativeTime(value) : relativeTime(value));
	const iso = $derived(typeof value === "string" ? value : value.toISOString());
</script>

{#if text}
	<time datetime={iso} title={formatDateTime(value)} class={className}>{text}</time>
{/if}