import { notFound } from "next/navigation";
import { AdSlot } from "@/components/AdSlot";
import { ArticleCard } from "@/components/ArticleCard";
import { Newsletter } from "@/components/Newsletter";
import { findCategory, getCategories, getPostsByCategory, getSiteConfig } from "@/lib/cms";
import { absoluteUrl } from "@/lib/seo";

type PageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const [site, categories] = await Promise.all([getSiteConfig(), getCategories()]);
  const category = findCategory(categories, slug);
  if (!category) return {};
  return {
    title: category.name,
    description: category.description,
    alternates: { canonical: absoluteUrl(site, `/seccion/${category.slug}`) }
  };
}

export default async function SectionPage({ params }: PageProps) {
  const { slug } = await params;
  const [categories, posts] = await Promise.all([getCategories(), getPostsByCategory(slug)]);
  const category = findCategory(categories, slug);
  if (!category) notFound();

  return (
    <main className="container">
      <AdSlot label={`Patrocinio de seccion ${category.name}`} />
      <section className="layout">
        <div>
          <div className="section-head">
            <div>
              <span className="kicker">Seccion</span>
              <h1>{category.name}</h1>
              <p>{category.description}</p>
            </div>
          </div>
          <div className="news-grid">
            {posts.map((post) => (
              <ArticleCard key={post.id} post={post} category={category} />
            ))}
          </div>
        </div>
        <aside className="sidebar">
          <Newsletter />
          <AdSlot label="Banner lateral de seccion" variant="tall" />
        </aside>
      </section>
    </main>
  );
}