---
const { prevPost, nextPost } = Astro.props;
---

<style lang="scss">
	.pagination {
		overflow: hidden;
		padding: 5rem 0;
		width: 100%;
	}

	@media (width <=684px) {
		.pagination {
			padding: 2rem 0;
		}
	}

	.prev,
	.next {
		max-width: 40%;
	}

	.prev {
		float: left;
	}

	.next {
		float: right;
	}
</style>

<div class="pagination">
	{
		prevPost && (
			<span class="prev">
				<a href={`/blog/${prevPost.slug}`}>&lt; {prevPost.data.title}</a>
			</span>
		)
	}
	{
		nextPost && (
			<span class="next">
				<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} &gt;</a>
			</span>
		)
	}
</div>