import type { Metadata } from "next";
import { BlogListPageClient } from "./BlogListPageClient";
import { BreadcrumbSection } from "@/components/BreadcrumbSection";
import { serverApiBaseUrl } from "@/lib/api-url";
import type { BlogPost } from "@/lib/blogs";

export const metadata: Metadata = {
  title: "Vehicle Care Blog",
  description:
    "Read Ride N Revive vehicle care guides covering car service, bike maintenance, dashboard warning lights, doorstep inspections, and safer everyday riding.",
  alternates: {
    canonical: "/blog",
  },
  openGraph: {
    title: "Vehicle Care Blog | Ride N Revive",
    description:
      "Helpful Ride N Revive guides for car care, bike service, maintenance checks, warning lights, and doorstep vehicle support.",
    url: "/blog",
  },
};

async function getInitialBlogPosts() {
  try {
    const response = await fetch(`${serverApiBaseUrl}/api/blogs`, {
      cache: "no-store",
    });

    if (!response.ok) {
      return [];
    }

    const data = (await response.json()) as { blogs?: BlogPost[] };
    return data.blogs ?? [];
  } catch {
    return [];
  }
}

export default async function BlogPage() {
  const initialPosts = await getInitialBlogPosts();

  return (
    <>
      <BreadcrumbSection
        currentPage="Blog"
        title="Vehicle care guides, all in one place"
        lead="Browse practical articles on car care, bike service, safety checks, and smarter maintenance decisions."
      />
      <BlogListPageClient initialPosts={initialPosts} />
    </>
  );
}