---
import { format, add } from 'date-fns';

import CalendarIcon from '../assets/svg/calendar.svg';

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

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

<div class="blog-header">
	{slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
	<div>
		<CalendarIcon class="calendar-icon" width={24} height={24} />
		<strong>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</strong>
	</div>
</div>

<style>
	a {
		font-size: 1.3rem;
	}

	strong {
		font-weight: bolder;
	}

	.blog-header {
		margin: 1rem 0;
	}

	.blog-header > h2 {
		margin: 0;
	}

	.calendar-icon {
		transform: translateY(0.3rem);
	}
</style>