---
import { Image } from "astro:assets";
import AuthorSingle from "@/layouts/AuthorSingle.astro";
import Base from "@/layouts/Base.astro";
import { getSinglePage } from "@/lib/contentParser.astro";
import dateFormat from "@/lib/utils/dateFormat";

import { sortByDate } from "@/lib/utils/sortFunctions";
import { humanize, slugify } from "@/lib/utils/textConverter";
import { BiCalendarEdit, BiCategoryAlt } from "react-icons/bi";

export async function getStaticPaths() {
  const authors = await getSinglePage("authors");

  const paths = authors.map((author: any) => ({
    params: {
      single: author.slug,
    },
    props: { author },
  }));
  return paths;
}

const { author } = Astro.props;
const { title, meta_title, description, image } = author.data;

// Author Posts
const posts = await getSinglePage("posts");
const sortPostsByDate = sortByDate(posts);
const currentPosts = sortPostsByDate.filter((post) => {
  return post.data.authors
    .map((author: string) => slugify(author))
    .includes(slugify(title));
});
---

<Base
  title={title}
  meta_title={meta_title}
  description={description}
  image={image}
>
  <AuthorSingle author={author} />

  {
    currentPosts.length > 0 && (
      <section class="section pt-0">
        <div class="container">
          <h2 class="mb-8 text-center h3">Recent Posts</h2>
          <div
            class={`row gy-4 ${currentPosts.length < 3 ? "justify-center" : ""}`}
          >
            {currentPosts.map((post: any, i: number) => (
              <div class="col-12 sm:col-6 lg:col-4">
                {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>
        </div>
      </section>
    )
  }
</Base>
