---
import { Image } from "astro:assets";
import { getAuthor, getCategory, formatDate } from "../lib/blog-data.js";

const { post, variant = "default", hidden = false } = Astro.props;
const author = getAuthor(post.author);
const category = getCategory(post.category);
const searchable = `${post.title} ${post.excerpt}`.toLowerCase();
const thumbnailIsString = typeof post.thumbnail === "string";
---

{
  variant === "compact" ? (
    <a
      href={`/blog/${post.slug}`}
      class="group block"
      data-post-card
      data-category={post.category}
      data-tags={post.tags.join(" ")}
      data-search={searchable}
      hidden={hidden}
    >
      <div class="text-xs uppercase tracking-wider text-muted-foreground">{category?.name}</div>
      <h3 class="mt-1 font-serif text-lg font-semibold leading-snug tracking-tight text-foreground group-hover:text-primary">
        {post.title}
      </h3>
      <div class="mt-1 text-xs text-muted-foreground">
        {formatDate(post.date)} &middot; {post.readingTime} min
      </div>
    </a>
  ) : variant === "list" ? (
    <article
      class="group grid gap-6 border-b border-border/60 py-8 sm:grid-cols-[1fr_220px]"
      data-post-card
      data-category={post.category}
      data-tags={post.tags.join(" ")}
      data-search={searchable}
      hidden={hidden}
    >
      <div>
        <div class="flex items-center gap-3 text-xs uppercase tracking-wider text-muted-foreground">
          {category && (
            <a href={`/categories/${category.slug}`} class="hover:text-foreground">
              {category.name}
            </a>
          )}
          <span>&middot;</span>
          <time datetime={post.date}>{formatDate(post.date)}</time>
        </div>
        <a href={`/blog/${post.slug}`}>
          <h2 class="mt-2 font-serif text-2xl font-semibold leading-tight tracking-tight group-hover:text-primary sm:text-3xl">
            {post.title}
          </h2>
        </a>
        <p class="mt-3 text-muted-foreground">{post.excerpt}</p>
        <div class="mt-4 flex items-center gap-3 text-xs text-muted-foreground">
          {author && (
            <a href={`/authors/${author.slug}`} class="hover:text-foreground">
              {author.name}
            </a>
          )}
          <span>&middot;</span>
          <span>{post.readingTime} min read</span>
        </div>
      </div>
      {post.thumbnail && (
        <a href={`/blog/${post.slug}`} class="block" aria-label={`Read ${post.title}`}>
          <div class="aspect-[4/3] overflow-hidden rounded-md bg-muted sm:aspect-square">
            {
              thumbnailIsString ? (
                <img
                  src={post.thumbnail}
                  alt=""
                  width="440"
                  height="330"
                  loading="lazy"
                  class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
                />
              ) : (
                <Image
                  src={post.thumbnail}
                  alt=""
                  loading="lazy"
                  class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
                />
              )
            }
          </div>
        </a>
      )}
    </article>
  ) : (
    <article
      class="group"
      data-post-card
      data-category={post.category}
      data-tags={post.tags.join(" ")}
      data-search={searchable}
      hidden={hidden}
    >
      {post.thumbnail && (
        <a href={`/blog/${post.slug}`} class="block" aria-label={`Read ${post.title}`}>
          <div class="aspect-[16/10] overflow-hidden rounded-md bg-muted">
            {
              thumbnailIsString ? (
                <img
                  src={post.thumbnail}
                  alt=""
                  width="640"
                  height="400"
                  loading="lazy"
                  class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
                />
              ) : (
                <Image
                  src={post.thumbnail}
                  alt=""
                  loading="lazy"
                  class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
                />
              )
            }
          </div>
        </a>
      )}
      <div class="mt-4">
        <div class="flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
          {category && (
            <a href={`/categories/${category.slug}`} class="hover:text-foreground">
              {category.name}
            </a>
          )}
          <span>&middot;</span>
          <time datetime={post.date}>{formatDate(post.date)}</time>
        </div>
        <a href={`/blog/${post.slug}`}>
          <h3 class="mt-2 font-serif text-xl font-semibold leading-snug tracking-tight group-hover:text-primary">
            {post.title}
          </h3>
        </a>
        <p class="mt-2 line-clamp-2 text-sm text-muted-foreground">{post.excerpt}</p>
        <div class="mt-3 text-xs text-muted-foreground">
          {author?.name} &middot; {post.readingTime} min
        </div>
      </div>
    </article>
  )
}
