---
import { formatDate } from '@/utils/data.util';
import Tags from './Tags.astro';
interface Props {
	post: any;
}

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

<a href={post.url}>
	<div
		class="h-full rounded-2xl bg-stone-200/50 from-orange-900 via-amber-700 to-white p-[1px] text-sm shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)] hover:bg-gradient-to-r dark:bg-gray-900"
	>
		<div
			class="flex h-full w-full
		flex-col
    rounded-[1rem]
		bg-stone-300
		p-4
		text-gray-900
    opacity-90
    dark:bg-stone-800
		dark:text-white"
		>
			<div class="flex-auto">
				<div class="flex justify-between pb-4 text-xs">
					<p>{formatDate(post.frontmatter.pubDate)}</p>
					<p>{post.frontmatter.minutesRead}</p>
				</div>

				<p class="pb-4 text-lg font-bold">{post.frontmatter.title}</p>

				<Tags tags={post.frontmatter.tags} />
				<p class="line-clamp-6 pt-4">{post.frontmatter.excerpt}</p>
			</div>
			<p class="pt-4 underline">read more →</p>
		</div>
	</div>
</a>
