---
import type { CollectionEntry } from 'astro:content'
import { Image } from 'astro:assets'
import FormattedDate from '../FormattedDate.astro'

interface Props {
	content: CollectionEntry<'post'>
}

const {
	content: { data, render }
} = Astro.props

const { remarkPluginFrontmatter } = await render()

const dateTimeOptions: Intl.DateTimeFormatOptions = {
	month: 'long'
}
---

{
	data.coverImage && (
		<div class='aspect-h-9 aspect-w-16 mb-6'>
			<Image
				alt={data.coverImage.alt}
				class='rounded-2xl object-cover'
				fetchpriority='high'
				loading='eager'
				src={data.coverImage.src}
			/>
		</div>
	)
}
{data.draft ? <span class='text-red-500'>(Draft)</span> : null}
<div class='flex flex-wrap items-center gap-x-3 gap-y-2'>
	<p class='text-xs'>
		<FormattedDate date={data.publishDate} dateTimeOptions={dateTimeOptions} /> /{' '}
		{remarkPluginFrontmatter.minutesRead}
	</p>
</div>
<h1 class='mt-2 text-3xl font-medium sm:mb-1'>
	{data.title}
</h1>

{
	!!data.tags?.length && (
		<div class='mt-3 flex flex-row items-center gap-x-1'>
			<svg
				aria-hidden='true'
				class='me-1 inline-block h-6 w-6'
				fill='none'
				focusable='false'
				stroke='currentColor'
				stroke-linecap='round'
				stroke-linejoin='round'
				stroke-width='1.5'
				viewBox='0 0 24 24'
				xmlns='http://www.w3.org/2000/svg'
			>
				<path d='M0 0h24v24H0z' fill='none' stroke='none' />
				<path d='M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z' />
				<path d='M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116' />
				<path d='M6 9h-.01' />
			</svg>
			{data.tags.map((tag, i) => (
				<div>
					<a
						aria-label={`View more blogs with the tag ${tag}`}
						class="inline-block before:content-['#'] hover:underline hover:underline-offset-4"
						data-pagefind-filter='tag'
						href={`/tags/${tag}/`}
					>
						{tag}
					</a>
					{i < data.tags.length - 1 && ', '}
				</div>
			))}
		</div>
	)
}

{
	data.updatedDate && (
		<p class='mt-6 text-base'>
			Last Updated:
			<FormattedDate class='ms-1' date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
		</p>
	)
}