---
import { Picture } from '@astrojs/image/components';
import PostTags from '~/components/common/Tags.astro';

import { BLOG } from '~/config.mjs';
import type { Post } from '~/types';

import { getPermalink } from '~/utils/permalinks';
import { findImage } from '~/utils/images';
import { getFormattedDate } from '~/utils/utils';

export interface Props {
	post: Post;
}

const { post } = Astro.props;
const image = await findImage(post.image);

const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
---

<article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
	{
		image && (
			<a class="relative block group" href={link ?? 'javascript:void(0)'}>
				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
					{image && (
						<Picture
							src={image}
							class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
							widths={[400, 900]}
							sizes="(max-width: 900px) 400px, 900px"
							alt={post.title}
							aspectRatio="16:9"
						/>
					)}
				</div>
			</a>
		)
	}
	<div>
		<header>
			<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
				{
					link ? (
						<a
							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
							href={link}
						>
							{post.title}
						</a>
					) : (
						post.title
					)
				}
			</h2>
		</header>
		<p class="text-md sm:text-lg flex-grow">
			{post.excerpt || post.description}
		</p>
		<footer class="mt-4">
			<div>
				<span class="text-gray-500 dark:text-slate-400">
					<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
					{Math.ceil(post.readingTime)} min read
				</span>
			</div>
			<div class="mt-4">
				<PostTags tags={post.tags} />
			</div>
		</footer>
	</div>
</article>
