import { BLOGS } from "@/app/lib/api/blogs";
import React from "react";
import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";

export default async function page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  // ✅ unwrap params (new Next behavior)
  const { id } = await params;

  const blogId = parseInt(id, 10);
  if (Number.isNaN(blogId)) return notFound();

  const blog = BLOGS.find((b) => b.id === blogId);
  if (!blog) return notFound();

  return (
    <div>
      <div className="min-h-screen bg-[var(--color-black)] text-white">
        {/* Header */}
        {/* sticky top-0 */}
        <div className=" z-10">
          <div className="container mx-auto  py-4">
            <div className="flex items-center gap-4">
              <Link
                href={`/blogs/`}
                className="cursor-pointer text-xs md:text-sm p-2 px-4 font-extrabold text-white bg-(--color-gray) hover:text-white italic font-sofia transition"
              >
                &lt; BACK
              </Link>

              <h1 className="text-sm uppercase md:text-xl font-extrabold italic ">
                BLOGS detail page
              </h1>
            </div>
            <div className="text-xs text-white mt-5 uppercase tracking-wide">
              {blog.date}
            </div>

            <h1 className="mt-2 text-xl md:text-3xl font-extrabold italic tracking-tight">
              {blog.title}
            </h1>

            <div className="relative w-full h-55 md:h-105 mt-5 overflow-hidden border border-slate-800">
              <Image
                src={blog.image}
                alt={blog.title}
                fill
                className="object-cover"
              />
            </div>

            <div className="mt-6 whitespace-pre-wrap font-onest leading-7 text-xs md:text-base 2xl:text-lg">
              {blog.content}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
