---
import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
import DefaultPageLayout from "../../layouts/default.astro";
import PostPreviewList from "../../components/PostPreviewList.astro";
import AuthorDetailCard from '../../components/AuthorDetailCard.astro';
import { getAllPosts, getAllAuthors, getSettings, twitter, facebook, invariant } from "@matthiesenxyz/astro-ghostcms/api";

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const { authors } = await getAllAuthors();
  const settings = await getSettings();

  return authors.map((author) => {
    const filteredPosts = posts.filter((post) =>
      post.authors?.map((author) => author.slug).includes(author.slug)
    );
    return {
      params: { slug: author.slug },
      props: {
        posts: filteredPosts,
        settings,
        author,
      },
    };
  });
}

export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
export type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { posts, settings, author } = Astro.props;
invariant(settings, "Settings are required");
const title = `Posts by author: ${author.name}`;
const description = `All of the articles we've posted and linked so far under the author: ${author.name}`;
---

<DefaultPageLayout
  bodyClass={`author-template author-${author.slug}`}
  content={{ title, description }}
  settings={settings}
>
  <section class="outer author-template">
    <AuthorDetailCard name={author.name} count={author.count?.posts || 0} image={author.profile_image} bio={author.bio} location={author.location} website={author.website} twitter={author.twitter} facebook={author.facebook}/>
    <PostPreviewList posts={posts} settings={settings} />
  </section>
</DefaultPageLayout>
