---
const { content, layout = "vertical", "data-aos": dataAos, "data-aos-delay": dataAosDelay } = Astro.props;

const {
  title,
  description,
  publishDate,
  tags = [] as string[],
  img,
  img_alt,
  slug,
  link
} = content;

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

const postLink = link || `/blog/${slug}`;

// Check if horizontal layout
const isHorizontal = layout === "horizontal";
---

<article
  class:list={[
    "group relative overflow-hidden bg-bg-secondary border-primary/35 p-4 dark:bg-neutral-900 rounded-2xl backdrop-blur-sm transition-all duration-500" ,
    { "md:flex md:items-center": isHorizontal }
  ]}
  data-aos={dataAos}
  data-aos-delay={dataAosDelay}
>
  <!-- Image container -->
  <div
    class:list={[
      "relative overflow-hidden rounded-2xl  dark:border-neutral-800/60 border-4 border-white ",
      isHorizontal ? "md:w-1/2" : "aspect-[3/2]"
    ]}
  >
    <!-- Image -->
    {img ? (
      <img
        src={img}
        alt={img_alt || `Related to ${title}`}
        loading="lazy"
        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
      />
    ) : (
      <div class="w-full h-full dark:from-neutral-800 dark:to-neutral-700 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400">
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
          <circle cx="9" cy="9" r="2"></circle>
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
        </svg>
      </div>
    )}

    <!-- Gradient overlay and button shown on hover -->
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
      <span class="w-14 h-14 bg-white/95 dark:bg-neutral-800/95 backdrop-blur-sm rounded-full flex items-center justify-center transform translate-y-8 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 shadow-lg hover:scale-110">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="text-primary"
        >
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </span>
    </div>

    <!-- Article link -->
    <a class="absolute inset-0 z-10" href={postLink}>
      <span class="sr-only">Read More About {title}</span>
    </a>
  </div>

  <!-- Content area -->
  <div class:list={[
    "p-6 px-2 md:p-6 flex flex-col",
    isHorizontal ? "md:w-1/2" : ""
  ]}>
    <!-- Date and tags -->
    <div class="flex items-center text-sm mb-4 gap-2">
      <time class="inline-flex items-center text-neutral-500 dark:text-neutral-400 text-xs">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1.5 opacity-60">
          <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
          <line x1="16" x2="16" y1="2" y2="6"></line>
          <line x1="8" x2="8" y1="2" y2="6"></line>
          <line x1="3" x2="21" y1="10" y2="10"></line>
        </svg>
        {formattedDate}
      </time>

      {tags && tags.length > 0 && (
        <>
          <span class="text-neutral-400 dark:text-neutral-500">·</span>
          <span class="inline-flex items-center rounded-full bg-bg-secondary/8 dark:bg-bg-secondary/15 px-3 py-1 text-[11px] font-light text-primary/75 dark:text-primary-light/85 border border-primary/25 dark:border-primary/25">
            {tags[0]}
          </span>
        </>
      )}
    </div>
    <!-- Title -->
    <a href={postLink}>
      <h2 class:list={["font-brand text-neutral-900 dark:text-white mb-3 leading-tight transition-colors duration-300 group-hover:text-primary dark:group-hover:text-primary-light line-clamp-2", isHorizontal ? "text-3xl" : "text-2xl"]}>
          {title}
        </h2>
    </a>

    <!-- Description -->
    {description && (
      <p class="text-neutral-600 dark:text-neutral-400 line-clamp-3 mb-5 text-sm leading-relaxed">
        {description}
      </p>
    )}

    <!-- Read More button -->
    <div class="mt-auto pt-4">
      <a
        href={postLink}
        class="inline-flex items-center gap-2 text-sm font-semibold text-primary dark:text-primary-light transition-all duration-300 group/link"
      >
        <span class="relative">
          Read More
          <span class="absolute bottom-0 left-0 w-0 h-0.25 bg-bg-secondary dark:bg-bg-secondary-light transition-all duration-300 group-hover/link:w-full"></span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="transition-transform duration-300 group-hover/link:translate-x-1"
        >
          <line x1="5" y1="12" x2="19" y2="12"></line>
          <polyline points="12 5 19 12 12 19"></polyline>
        </svg>
      </a>
    </div>
  </div>

</article>