---
const allPosts = await Astro.glob("../../pages/blog/posts/*.md");

import Tag from "../ui/Tag.astro";
import ReadMore from "../ui/ReadMore.astro";
import Capsule from "../ui/Capsule.astro";
import DatePub from "./DatePub.astro";

// Get the latest post using reduce
const latestPost = allPosts.reduce((latest, current) => {
  const latestDate = new Date(latest.frontmatter.pubDate).getTime();
  const currentDate = new Date(current.frontmatter.pubDate).getTime();
  return currentDate > latestDate ? current : latest;
});

const tags = [...new Set(latestPost.frontmatter.tags ?? [])];
const languages = [...new Set(latestPost.frontmatter.languages ?? [])];
const image = latestPost.frontmatter.image.url;
const imageAlt =
  latestPost.frontmatter.image.alt || latestPost.frontmatter.title;
---

{
  latestPost && (
    <div
      style={{ backgroundImage: `url(${image})` }}
      class="h-full hover:shadow-[0_20px_50px_rgba(13,_188,_130,_0.2)] flex flex-col overflow-hidden rounded-2xl bg-gradient-to-br bg-center bg-cover transition-all ease-in-out duration-200"
      role="article"
      aria-labelledby="post-title"
    >
      <article class="h-full flex flex-col justify-between max-sm:bg-zinc-900 max-sm:relative min-sm:bg-gradient-to-t from-black/95 from-25% to-transparent max-sm:from-60% p-8 max-md:p-6 max-sm:mp-0 max-sm:p-0">
        <a
          href=""
          class="min-sm:hidden relative top-0 left-0 w-full h-auto -z-0"
          aria-hidden="true"
        >
          <img
            src={image}
            alt={imageAlt}
            class="w-full h-auto"
            loading="lazy"
          />
        </a>
        <div
          class="w-full flex pb-5 gap-2 flex-wrap justify-end z-10 max-sm:px-6 max-sm:pt-6"
          role="list"
          aria-label="Programming languages"
        >
          {languages.map((language: unknown) => (
            <Capsule lang={language?.toString() || ""} />
          ))}
        </div>

        <a
          href={latestPost.url}
          class="text-mint-50 gap-3 h-full flex items-end max-sm:px-6  rounded-lg transition-all"
          aria-label={`Read article: ${latestPost.frontmatter.title}`}
        >
          <div class="gap-3 flex flex-col justify-end drop-shadow-[1px_6px_1px_rgba(0,_0,_0,_0.3)]">
            <DatePub date={latestPost.frontmatter.pubDate} class="text-mint-50" />
            <h2
              id="post-title"
              class="text-4xl max-xl:text-3xl max-sm:text-2xl font-bold"
            >
              <span>{latestPost.frontmatter.title}</span>
            </h2>
            <ReadMore class="text-mint-50" />
          </div>
        </a>

        <div
          class="gap-2 mt-3 justify-start items-center flex flex-row flex-wrap max-sm:px-6 max-sm:pb-6"
          role="list"
          aria-label="Article tags"
        >
          {tags.map((tag) => (
            <Tag tag={tag} forceDark="true">{tag}</Tag>
          ))}
        </div>
      </article>
    </div>
  )
}