---
import BaseLayout from "../../layouts/BaseLayout.astro";
import Breadcrumbs from "../../components/Breadcrumbs.astro";
import PostCard from "../../components/PostCard.astro";
import { SITE, authors, postsByAuthor, personSchema } from "../../lib/blog-data.js";

export function getStaticPaths() {
  return authors.map((author) => ({ params: { slug: author.slug }, props: { author } }));
}

const { author } = Astro.props;
const list = await postsByAuthor(author.slug);
const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  mainEntity: personSchema(author),
};
---

<BaseLayout
  title={`${author.name} - ${SITE.name}`}
  description={author.bio}
  canonical={`/authors/${author.slug}`}
  ogImage={author.avatar}
  jsonLd={jsonLd}
>
  <div class="mx-auto max-w-4xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "Authors" }, { label: author.name }]} />

    <header class="mt-8 flex flex-col items-start gap-6 border-b border-border pb-10 sm:flex-row sm:items-center">
      <img src={author.avatar} alt="" width="96" height="96" class="h-24 w-24 rounded-full" />
      <div>
        <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">Author</div>
        <h1 class="mt-2 font-serif text-4xl font-semibold tracking-tight">{author.name}</h1>
        <p class="mt-3 max-w-xl text-muted-foreground">{author.longBio}</p>
      </div>
    </header>

    <section class="mt-2">
      <div class="mt-6 text-xs uppercase tracking-wider text-muted-foreground">
        {list.length} {list.length === 1 ? "piece" : "pieces"} by {author.name.split(" ")[0]}
      </div>
      {list.map((post) => <PostCard post={post} variant="list" />)}
    </section>
  </div>
</BaseLayout>
