"use client";

import { useRouter } from 'next/router';
import Image from 'next/image';

const BlogSection = ({ posts }) => {
  const router = useRouter();

  const handleNavigate = (slug) => {
    if (document.startViewTransition) {
      document.startViewTransition(() => router.push(`/blog/${slug}`));
    } else {
      router.push(`/blog/${slug}`);
    }
  };

  return (
    <section className="max-w-4xl mx-auto mt-20">
      <h2 className="text-3xl font-bold mb-8">Latest Posts</h2>
      <div className="grid gap-8 md:grid-cols-2">
        {posts.map((post) => (
          <article
            key={post.id}
            onClick={() => handleNavigate(post.slug)}
            className="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow flex flex-col cursor-pointer"
          >
            <div
              className="h-40 relative rounded-md overflow-hidden shadow-md mb-4"
              data-view-transition-name={`cover-image-${post.id}`}
            >
              {post.coverUrl ? (
                <Image
                  src={post.coverUrl}
                  alt={post.title}
                  fill
                  className="object-cover"
                />
              ) : (
                <div>Image fallback</div>
              )}
            </div>
            <h3 className="text-xl font-semibold mb-2">{post.title}</h3>
            <p className="text-gray-600 mb-4 flex-grow">{post.summary}</p>
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-500">
                {formatDate(post.date)}
              </span>
              <span className="text-blue-500 hover:underline">Read more →</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

export default BlogSection;