---
import { type CollectionEntry, getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import AuthorCard from '@components/AuthorCard.astro'
import BlogCard from '@components/BlogCard.astro'
import { Button } from '@/components/ui/button'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { HomeIcon } from 'lucide-react'

export async function getStaticPaths() {
  const authors = await getCollection('authors')
  return authors.map((author) => ({
    params: { slug: author.slug },
    props: { author },
  }))
}

type Props = {
  author: CollectionEntry<'authors'>
}

const { author } = Astro.props

const allPosts = await getCollection('blog')
const authorPosts = allPosts
  .filter((post) => {
    return post.data.authors && post.data.authors.includes(author.slug)
  })
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
---

<Layout
  title={`${author.data.name} - Author`}
  description={author.data.bio || `Profile of ${author.data.name}.`}
>
  <Container>
    <Breadcrumb className="mb-6">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/"
            ><HomeIcon className="size-4" /></BreadcrumbLink
          >
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/authors">Authors</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>{author.data.name}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>

    <div class="space-y-10">
      <section>
        <AuthorCard author={author} />
      </section>
      <section class="space-y-4">
        <h2 class="text-2xl font-semibold">Posts by {author.data.name}</h2>
        {
          authorPosts.length > 0 ? (
            <ul class="not-prose flex flex-col gap-4">
              {authorPosts.map((post) => (
                <li>
                  <BlogCard entry={post} />
                </li>
              ))}
            </ul>
          ) : (
            <p class="text-muted-foreground">
              No posts available from this author.
            </p>
          )
        }
      </section>
    </div>
  </Container>
</Layout>