<script lang="ts">
	import { format } from 'date-fns';
	import type { Post } from './+page.server';

	export let showYear: boolean = false;
	export let showReadingTime: boolean = true;
	export let post: Post;

	const href = `/${post.path}/`;
</script>

<a {href}>
	<li>
		<div>
			<h5 class="post-title">
				{post.meta.title}
			</h5>
			{#if post.meta.description}
				<p class="description">{post.meta.description}</p>
			{/if}
		</div>
		<div class="meta">
			<time datetime={post.meta.date}>
				{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
			</time>
			{#if showReadingTime}
				<div>{post.readingTime.words} words, {post.readingTime.text}</div>
			{/if}
		</div>
	</li>
	<div class="print-link">{`https://bgenc.net${href}`}</div>
</a>

<style lang="scss">
	@import '../../../vars';

	/* Restore the color of everything under the post links, except the titles */
	a {
		color: $color-text;
		text-decoration: none;

		.post-title {
			color: $color-primary;
		}

		&:hover .post-title {
			text-decoration-color: unset;
		}
	}

	time {
		width: 8rem;
	}

	.post-title {
		text-decoration: underline;
		text-decoration-color: transparent;
		transition: all var(--animation-speed) var(--animation-type);
	}

	li {
		list-style-type: none;
		font-weight: normal;
	}

	.description {
		font-size: 0.9rem;
		margin-top: -1.4rem;
	}
	.meta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 0.9rem;
		opacity: 0.8;
	}

	.print-link {
		display: none;
	}

	@media print {
		.print-link {
			display: block;
		}
	}
</style>
