---
import FormattedDate from '@components/FormattedDate.astro';

interface Props {
	title: String;
	date: Date;
	slug?: String;
}

const { title, date, slug } = Astro.props;
---

<div class="blog-header">
	<h2>
		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
	</h2>
	<h3>
		<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->

		🗓️ <FormattedDate date={date} />
	</h3>
</div>

<style>
	a {
		text-decoration: none;
	}
	a:hover {
		text-decoration: none;
	}

	h2,
	h2 a {
		font-size: 1.4rem;
	}

	h3 {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.9rem;
	}
</style>