---
import Tags from "@/components/ui/Tags.astro";
import { type CollectionEntry, render } from "astro:content";

export interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;
const { remarkPluginFrontmatter } = await render(post);

const readingTime = remarkPluginFrontmatter?.minutesRead
  ? `${Math.ceil(remarkPluginFrontmatter.minutesRead)} min read`
  : "";
---

<article
  class="reveal group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-300 hover:shadow-lg hover:shadow-primary/5"
>
  <div class="relative h-48 w-full overflow-hidden">
    {
      post.data.image && (
        <img
          src={post.data.image}
          alt={post.data.title}
          class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      )
    }
  </div>
  <div class="flex flex-1 flex-col p-6">
    <div class="flex-1">
      <p class="text-sm font-medium text-primary">
        {post.data.author}
      </p>
      <a
        href={`/blog/${post.id}`}
        class="mt-2 block before:absolute before:inset-0 before:z-10"
      >
        <p class="text-xl font-semibold text-foreground group-hover:underline">
          {post.data.title}
        </p>
        <p class="mt-3 text-base text-muted-foreground line-clamp-3">
          {post.data.description}
        </p>
      </a>
    </div>
    <div class="mt-6 flex items-center">
      <div class="shrink-0">
        <span class="sr-only">
          {post.data.author}
        </span>
      </div>
      <div class="">
        <div class="flex space-x-1 text-sm text-muted-foreground">
          <time datetime={post.data.pubDate.toISOString()}>
            {
              post.data.pubDate.toLocaleDateString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
                timeZone: "UTC",
              })
            }
          </time>
          {readingTime && <span aria-hidden="true">&bull;</span>}
          {readingTime && <span>{readingTime}</span>}
        </div>
      </div>
    </div>

    {
      post.data.tags && (
        <div class="mt-4 relative z-20">
          <Tags tags={post.data.tags} />
        </div>
      )
    }
  </div>
</article>
