---
import { MarkdownInstance } from 'astro/dist/@types/astro';
import Section from './Section.astro';
import Card from './Card.astro';

interface Props {
	posts: MarkdownInstance<any>[];
}

const { posts } = Astro.props;
---

<Section>
	<div class="flex justify-between pb-4">
		<p class="text-xl font-bold">Latest Posts</p>
		<a href="/posts" class="underline hover:text-orange-600">all posts →</a>
	</div>
	<div class="flex flex-col pb-4 md:flex-row">
		{
			posts.map((post: any) => (
				<div class="mb-4 basis-1 last:mr-0 md:mr-4 md:basis-1/3">
					<Card post={post} />
				</div>
			))
		}
	</div>
</Section>
