---
export interface Props {
	post: any;
	author: string;
}
const { post, author } = Astro.props;
const { frontmatter } = post;

function formatDate(date) {
	return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY
}
---

<article class="post">
	<div class="data">
		<h2>{frontmatter.title}</h2>
		<a class="author" href={`/authors/${frontmatter.author}`}>{author.name}</a>
		<time class="date" datetime={frontmatter.date}>{formatDate(frontmatter.date)}</time>
		<p class="description">
			{frontmatter.description}
			<a class="link" href={post.url} aria-label={`Read ${frontmatter.title}`}>Read</a>
		</p>
	</div>
</article>

<style lang="scss">
	.post {
		padding-top: 6rem;
		padding-bottom: 6rem;
		border-bottom: 1px solid rgba(black, 0.25);
		text-align: center;
	}

	.author {
		text-transform: uppercase;
	}

	.date {
		font-style: italic;
	}

	.description {
		font-size: 1.25em;
	}

	.link {
		text-transform: uppercase;
		font-size: 0.8em;
		margin-left: 1em;
	}

	h2 {
		font-weight: 700;
		font-size: 2.75em;
		line-height: 1;
		letter-spacing: -0.04em;
		margin-top: 0;
		margin-bottom: 0;
	}

	time {
		display: block;
		margin-top: 0.25rem;
		margin-bottom: 0.5em;
	}
</style>