import React from "react";
import BlogPostCard from "@/components/BlogPostCard";
import type { Metadata } from "next";
import { getPosts } from "@/lib/query/post";
import { Post } from "@/types";
// --- SEO Metadata ---
export const metadata: Metadata = {
  title: "OMS TechTalk | Insights & Innovation",
  description:
    "Explore the latest insights, trends, and discussions on technology, innovation, and digital transformation from the experts at Owethu Managed Services (OMS).",
  alternates: {
    canonical: "/tech-talk",
  },
  openGraph: {
    title: "OMS TechTalk | Insights & Innovation",
    description: "Stay updated with tech insights from OMS.",
    url: "https://oms.africa/tech-talk",
    images: [
      {
        url: "/og-image-techtalk.jpg",
        width: 1200,
        height: 630,
        alt: "OMS TechTalk Banner",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "OMS TechTalk | Insights & Innovation",
    description: "Tech insights and articles from Owethu Managed Services.",
    images: ["/og-image-techtalk.jpg"],
  },
};

// --- Page Component ---
const TechTalkPage = async () => {
  const posts: Post[] = await getPosts();

  return (
    <div className="bg-background text-foreground">
      <div className="container mx-auto px-4 py-16 sm:py-20 lg:py-24">
        {/* Page Header */}
        <div className="text-center mb-12 md:mb-16">
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-primary">
            OMS TechTalk
          </h1>
          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
            Insights, trends, and discussions on the latest in technology,
            innovation, and digital transformation from the experts at OMS.
          </p>
        </div>
        {/* Blog Post Grid */}
        {false && posts.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
            {posts.map((post: Post) => (
              <BlogPostCard
                key={post.slug}
                slug={post.slug}
                title={post.title}
                excerpt={post.excerpt ?? "No excerpt available"}
                imageUrl={
                  post.featured_image ?? "/posts/default-placeholder.jpg"
                }
                author={"OMS Team"}
                date={new Date(post.date_created).toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
              />
            ))}
          </div>
        ) : (
          <p className="text-center text-muted-foreground">
            No posts published yet. Check back soon!
          </p>
        )}

        {/* TODO: Add Pagination component here if needed */}
      </div>
    </div>
  );
};

export default TechTalkPage;