// 🚫 NO "use client"

import Image from "next/image";
import Link from "next/link";
import { getBlogs } from "@/lib/api";

export default async function BlogListSSR() {
  let blogs = [];

  try {
    blogs = await getBlogs();
  } catch (err) {
    console.error("Blog list fetch failed:", err);
  }

  return (
    <div className="max-w-6xl mx-auto my-12 p-4">
      {blogs.length > 0 ? (
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {blogs.map((blog: any) => (
            <div
              key={blog.slug}
              className="rounded-2xl shadow-md overflow-hidden hover:shadow-lg transition"
            >
              <Image
                src={blog.image || "/no-image.jpg"}
                alt={blog.title}
                width={500}
                height={300}
                className="w-full h-48 object-cover"
              />

              <div className="p-4">
                <h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
                <p className="text-gray-600 text-sm mb-2">{blog.date}</p>

                <div className="flex justify-end">
                  <Link
                    href={`/blog/detail/${blog.slug}`}
                    className="Custome_Orange_button_apply flex items-center justify-center gap-3 text-[15px]"
                  >
                    Read More
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-center text-lg">No blogs found.</p>
      )}
    </div>
  );
}