---
import { Image } from "astro:assets";
import dateFormat from "@/lib/utils/dateFormat";
import { humanize, slugify } from "@/lib/utils/textConverter";
import { BiCalendarEdit, BiCategoryAlt } from "react-icons/bi";
const { posts } = Astro.props;
---

<div class="row gy-4 justify-center">
  {
    posts.map((post: any, i: number) => (
      <div class={`col-12 sm:col-6 md:col-4 ${i === 2 && "hidden md:block"}`}>
        {post.data.image && (
          <a
            href={`/${post.slug}`}
            class="rounded-lg block hover:text-primary overflow-hidden group"
          >
            <Image
              class="group-hover:scale-[1.05] transition duration-300 w-full"
              src={post.data.image}
              alt={post.data.title}
              width={445}
              height={230}
            />
          </a>
        )}
        <ul class="mt-4 text-text flex flex-wrap items-center text-sm">
          <li class="mb-2 mr-4 flex items-center flex-wrap font-medium">
            <BiCalendarEdit className="mr-1 h-[16px] w-[16px] text-gray-600" />
            <>{dateFormat(post.data.date)}</>
          </li>
          <li class="mb-2 mr-4 flex items-center flex-wrap">
            <BiCategoryAlt className="mr-1 h-[16px] w-[16px] text-gray-600" />
            <>
              <ul>
                {post.data.categories.map((category: string, i: number) => (
                  <li class="inline-block">
                    <a
                      href={`/categories/${slugify(category)}`}
                      class="mr-2 hover:text-primary font-medium"
                    >
                      {humanize(category)}
                      {i !== post.data.categories.length - 1 && ","}
                    </a>
                  </li>
                ))}
              </ul>
            </>
          </li>
        </ul>
        <h3 class="h5">
          <a
            href={`/${post.slug}`}
            class="block hover:text-primary transition duration-300"
          >
            {post.data.title}
          </a>
        </h3>
      </div>
    ))
  }
</div>
