---
import BaseHead from "@/components/BaseHead.astro";
import { Footer } from "@/components/sections/footer";
import Navbar from "@/components/sections/navbar";
import { Badge } from "@/components/ui/badge";
import { getCollection, render } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<html lang="en">
  <head>
    <BaseHead title={post.data.title} description={post.data.description || ""} />
  </head>
  <body class="flex min-h-screen flex-col antialiased">
    <Navbar client:load />
    <main class="w-full flex-1">
      <div class="container mx-auto px-4 py-8">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-6">
          <ol class="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
            <li class="inline-flex items-center gap-1">
              <a href="/" class="transition-colors hover:text-foreground">Home</a>
            </li>
            <li role="presentation" aria-hidden="true" class="[&>svg]:size-3.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="m9 18 6-6-6-6"></path></svg>
            </li>
            <li class="inline-flex items-center gap-1">
              <a href="/blog" class="transition-colors hover:text-foreground">Blog</a>
            </li>
            <li role="presentation" aria-hidden="true" class="[&>svg]:size-3.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="m9 18 6-6-6-6"></path></svg>
            </li>
            <li class="inline-flex items-center gap-1">
              <span class="font-normal text-foreground" role="link" aria-disabled="true" aria-current="page">
                {post.data.title}
              </span>
            </li>
          </ol>
        </nav>

        <article class="max-w-2xl mx-auto">
          <header class="mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-foreground font-display mb-4">
              {post.data.title}
            </h1>
            <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
              {post.data.date && (
                <time>
                  {new Date(post.data.date).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </time>
              )}
              {post.data.author && (
                <span>by {post.data.author}</span>
              )}
            </div>
            {post.data.tags && post.data.tags.length > 0 && (
              <div class="flex flex-wrap gap-2 mt-3">
                {post.data.tags.map((tag: string) => (
                  <Badge variant="secondary" className="text-xs">{tag}</Badge>
                ))}
              </div>
            )}
          </header>

          <div class="prose prose-lg dark:prose-invert max-w-none">
            <Content />
          </div>

          <div class="mt-12 pt-6 border-t">
            <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
              &larr; Back to all posts
            </a>
          </div>
        </article>
      </div>
    </main>
    <Footer />
  </body>
</html>
