<template>
	<div class="comment">
		<div class="header">
			<a
				:href="`/user/${comment.user.username}`"
				class="username link"
			>u/{{ comment.user.username }}</a>

			<span
				:title="format(comment.createdAt, 'MMM d, yyyy hh:mm:ss')"
				class="timestamp"
			>{{ formatDistance(comment.createdAt, now, { includeSeconds: true }) }} ago</span>
		</div>

		<p class="body">{{ comment.body }}</p>
	</div>
</template>

<script setup>
import { format, formatDistance } from 'date-fns';
import { usePageContext } from '../../renderer/usePageContext';

const { now } = usePageContext();

defineProps({
	comment: {
		type: Object,
		default: null,
	},
});
</script>

<style scoped>
.comment {
	background: var(--background);
	padding: .5rem;
	border-radius: .25rem;
	margin-bottom: .25rem;
}

.header {
	font-size: .9rem;
	margin-bottom: .5rem;
}

.username {
	color: inherit;
	font-weight: bold;
	margin-right: .5rem;
}

.timestamp {
	color: var(--shadow);
}

.body {
	margin: 0;
}
</style>
