---
import { Picture } from '@astrojs/image/components';

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

import type { Post } from '~/utils/posts';

export interface Props {
	post: Post;
}

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

<article class="mb-6 transition">
	<div class="relative h-0 pb-[56.25%] lg:h-64 overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
		{
			image && (
				<Picture
					src={image}
					class="object-cover w-full lg:h-64 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>
	<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
		<a
			href={getPermalink(post.slug, 'post')}
			class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
		>
			{post.title}
		</a>
	</h3>
	<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
</article>