<script lang="ts" setup>
import { computed } from "vue";

import { now } from "@/lib/now";

const props = defineProps<{
	time: string | Date;
}>();

const formatTimeAgo = (date: Date, compact = true) => {
	const timestamp = date.getTime();

	const now = Date.now();
	const diff = now - timestamp;
	const seconds = Math.floor(diff / 1000);
	const minutes = Math.floor(seconds / 60);
	const hours = Math.floor(minutes / 60);
	const days = Math.floor(hours / 24);

	if (compact) {
		if (days > 0) return `${days}d`;
		if (hours > 0) return `${hours}h`;
		if (minutes > 0) return `${minutes}m`;
		return `${seconds}s`;
	}

	if (days > 0) return `${days} day${days > 1 ? "s" : ""} ago`;
	if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
	if (minutes > 0) return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
	return `${seconds} second${seconds > 1 ? "s" : ""} ago`;
};

const timeString = props.time instanceof Date ? props.time.toISOString() : props.time;

const timeAgo = computed(() => {
	const _tick = now.value;
	if (_tick) {
	}

	const date = props.time;
	if (typeof date === "string") return formatTimeAgo(new Date(date));

	return formatTimeAgo(date);
});
</script>

<template>
	<time :datetime="timeString">{{ timeAgo }}</time>
</template>