---
import { formatDate } from '@/utils/data.util';
import Section from './Section.astro';
import Tags from './Tags.astro';

interface Props {
	title: string;
	author: string;
	tags: string[];
	minutesRead: string;
	pubDate: string;
	img: {
		src: string;
		alt: string;
	};
}

const { title, pubDate, tags, minutesRead, img } = Astro.props;

const formattedDate = formatDate(pubDate);
---

<Section>
	<div class="flex flex-col items-center">
		<p class="px-14 pb-4 pt-6 text-center text-4xl font-bold">{title}</p>
		<div class="pb-4">
			<Tags tags={tags} withHref={true} />
		</div>
		<div class="text-sm">
			<span>{formattedDate}</span> - <span>{minutesRead}</span>
		</div>

		{img.src ? <img src={img.src} alt={img.alt} /> : null}
	</div>
</Section>
