---
interface Props {
  title: string;
  description: string;
  pubDate: Date;
  slug: string;
  tags?: string[];
  heroImage?: string;
}

const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;

const formattedDate = pubDate.toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
});
---

<a
  href={`/iptvnator/blog/${slug}/`}
  class="card-dotted group block"
>
  {heroImage && (
    <div class="overflow-hidden rounded-t-lg -mx-6 -mt-6 mb-5">
      <img
        src={heroImage}
        alt=""
        class="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
        loading="lazy"
      />
    </div>
  )}
  <div class="flex items-center gap-2">
    <time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
      {formattedDate}
    </time>
    {
      tags.length > 0 && (
        <>
          <span class="text-surface-700">&middot;</span>
          {tags.map((tag) => (
            <span class="rounded-full border border-dashed border-accent-500/30 px-2 py-0.5 text-xs text-accent-400">
              {tag}
            </span>
          ))}
        </>
      )
    }
  </div>
  <h3
    class="mt-3 font-display text-lg font-semibold text-surface-100 transition-colors duration-200 group-hover:text-accent-400"
  >
    {title}
  </h3>
  <p class="mt-2 text-sm leading-relaxed text-surface-500">
    {description}
  </p>
  <span class="mt-4 inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors group-hover:text-accent-400">
    Read more
    <svg
      class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
    </svg>
  </span>
</a>