import { ArrowRight } from "lucide-react";
import Link from "next/link";

interface BlogPost {
  slug: string;
  title: string;
  excerpt: string;
  categories: string[];
}

interface BlogPreviewSectionProps {
  posts?: BlogPost[];
}

export function BlogPreviewSection({ posts }: BlogPreviewSectionProps) {
  return (
    <section className="py-24 px-8 border-t border-zinc-800/50">
      <div className="max-w-6xl mx-auto">
        <div className="flex justify-between items-end mb-12">
          <div>
            <p className="uppercase tracking-[0.2em] text-primary mb-2 font-semibold text-xs">
              From the network
            </p>
            <h2 className="text-3xl font-black tracking-tight">Latest from the Blog</h2>
          </div>
          <Link
            href="/blog"
            className="hidden md:flex items-center gap-2 text-sm text-primary font-semibold hover:gap-3 transition-all"
          >
            View All <ArrowRight size={16} />
          </Link>
        </div>

        {!posts || posts.length === 0 ? (
          <p className="text-on-surface-variant text-center py-16 text-sm">
            No posts yet. Check back soon for curated Bitcoin content.
          </p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
            {posts.map((post) => (
              <Link
                key={post.slug}
                href={`/blog/${post.slug}`}
                className="group flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200"
              >
                {post.categories.length > 0 && (
                  <div className="flex flex-wrap gap-2 mb-4">
                    {post.categories.map((cat) => (
                      <span
                        key={cat}
                        className="text-primary text-[10px] uppercase tracking-widest font-bold"
                      >
                        {cat}
                      </span>
                    ))}
                  </div>
                )}
                <h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
                  {post.title}
                </h3>
                <p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
                  {post.excerpt}
                </p>
                <span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all mt-auto">
                  Read More <ArrowRight size={13} />
                </span>
              </Link>
            ))}
          </div>
        )}

        <Link
          href="/blog"
          className="md:hidden flex items-center justify-center gap-2 text-primary font-semibold mt-8 text-sm"
        >
          View All <ArrowRight size={16} />
        </Link>
      </div>
    </section>
  );
}