import { getBlogs } from "@/services/blogs";
import type { Blog } from "@/services/blogs";
import { PAGES } from "@/constants/pages";
import { InnerPageLayout } from "@/components/shared/InnerPageLayout";
import BlogsSchema from "@/components/schema/BlogsSchema";

const slug = "/blogs";
const data = PAGES[slug];

export const metadata = {
  title: data?.metaTitle || "Wedding & Event Planning Blog | TGHR Pune",
  description:
    data?.metaDescription ||
    "Explore wedding planning, venue selection, corporate events, staycations and event guides from The Grand Heritage Resorts serving Pune.",
  keywords: data?.metaKeywords,
  alternates: {
    canonical: data?.canonicalUrl,
  },
  openGraph: {
    title: data?.ogTitle,
    description: data?.ogDescription,
    url: data?.canonicalUrl,
    siteName: "The Grand Heritage Resorts",
    images: [
      {
        url: data?.ogImage,
        alt: data?.ogImageAlt,
        title: data?.ogImageTitle,
      },
    ],
    locale: "en_IN",
  },
};

export const dynamic = "force-dynamic";

export default async function BlogsPage() {
  let popularBlogs: Blog[] = [];
  let latestBlogs: Blog[] = [];

  try {
    const [popularResponse, latestResponse] = await Promise.all([
      getBlogs({
        sort: "views",
      }),
      getBlogs({
        sort: "latest",
        limit: 4,
      }),
    ]);

    popularBlogs = popularResponse?.data ?? [];
    latestBlogs = latestResponse?.data ?? [];
  } catch (error) {
    console.error("Failed to fetch blogs:", error);
  }

  const allBlogs = Array.from(
    new Map(
      [...popularBlogs, ...latestBlogs].map((blog) => [
        blog._id,
        blog,
      ])
    ).values()
  );

  return (
    <>
    <BlogsSchema blogs={allBlogs} />
    
    <InnerPageLayout
      data={{
        ...PAGES["/blogs"],
        blogs: popularBlogs,

        trendingBlogs: popularBlogs.slice(0, 10),

        latestBlogs,
      }}
    />
    </>
  );
}