import Image from "next/image";
import Link from "next/link";

export default function LatestBlogs({ posts }: { posts: any[] }) {
  return (
    <section className="bg-[#F3F3F3] pt-20">
      <div className="container mx-auto px-4">

        {/* Section Header */}
        <div className="text-center max-w-4xl mx-auto mb-16">
          <span className="text-lg font-medium text-[#202020]/50 block mb-2">
            Latest Insights & Blogs
          </span>

          <h2 className="text-2xl lg:text-[40px] font-medium text-[#202020] font-mono mb-4">
            Insights That Power Growth
          </h2>

          <p className="text-md md:text-lg font-medium text-[#202020]/70">
            Explore articles on gaming platforms, AI-powered technology, digital natives, and performance marketing - designed to help you get ahead in the fast-paced digital design world.
          </p>
        </div>

        {/* Blog Cards */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-[30px]">
          {posts.map((post) => (
            <Link
              key={post.id}
              href={`/blog/${post.slug}`}
              className="group bg-white rounded-lg overflow-hidden border border-[#202020]/15"
            >
              {/* Image */}
              {post.featuredImage?.node?.sourceUrl && (
                <div className="overflow-hidden">
                  <Image
                    src={post.featuredImage.node.sourceUrl}
                    alt={post.title}
                    width={1200}
                    height={675}
                    unoptimized
                    className="w-full h-full"
                  />
                </div>
              )}

              {/* Content */}
              <div className="p-5 flex flex-col h-full">
                {/* Meta */}
                <div className="text-sm text-[#202020]/70 flex items-center justify-between mb-2">
                  <span>Branding, Marketing</span>
                  <span>
                    {new Date(post.date).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </div>

                {/* Title */}
                <h3 className="font-mono font-medium text-xl lg:text-2xl mb-3 text-[#202020] line-clamp-3">
                  {post.title}
                </h3>

                {/* Excerpt */}
                <div
                  className="text-[#202020]/70 text-[16px] line-clamp-4 mb-6"
                  dangerouslySetInnerHTML={{ __html: post.excerpt }}
                />

                {/* Footer */}
                <div className="flex items-center justify-between">
                  <span className="text-[16px] font-medium text-[#202020]/70">
                    TOGWE
                  </span>

                  <span className="w-15 h-9 rounded-md border border-[#202020]/50 flex items-center justify-center group-hover:bg-[#101010] text-[#202020] group-hover:text-[#fff] transition">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                      <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </div>
              </div>
            </Link>
          ))}
        </div>

        {/* Explore More */}
        <div className="text-center mt-2 md:mt-16">
          <Link
            href="/blog"
            className="group inline-flex items-center gap-2 mt-8
              border border-[#202020]/50 px-6 py-3 rounded text-sm md:text-lg font-medium
              hover:bg-[#101010] text-[#202020] hover:text-white transition"
          >
            Explore More
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </Link>
        </div>
      </div>
    </section>
  );
}