"use client";

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

interface BlogPost {
  id: number;
  title: string;
  slug: string;
  excerpt: string | null;
  category: string | null;
}

export default function BlogSection({ posts }: { posts: BlogPost[] }) {
  const categoryColors: Record<string, string> = {
    "Medical Guide": "bg-green-100 text-green-700",
    "Travel Guide": "bg-blue-100 text-blue-700",
    "Hospital Guide": "bg-purple-100 text-purple-700",
  };

  return (
    <section className="py-10 bg-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-lg font-bold text-slate-900">Medical Travel Guides</h2>
          <Link
            href="/blog"
            className="text-sm text-green-600 font-semibold hover:text-green-700 flex items-center gap-1"
          >
            Read Blog →
          </Link>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {posts.map((post, i) => (
            <Link
              key={post.id}
              href={`/blog/${post.slug}`}
              className="group bg-white border border-slate-100 rounded-xl p-4 hover:shadow-md transition-all hover:-translate-y-0.5 flex gap-3 items-start"
              style={{ animationDelay: `${i * 80}ms` }}
            >
              <div className="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center flex-shrink-0">
                <BookOpen className="w-5 h-5 text-green-500" />
              </div>
              <div>
                {post.category && (
                  <span
                    className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full mb-1 inline-block ${
                      categoryColors[post.category] || "bg-slate-100 text-slate-600"
                    }`}
                  >
                    {post.category}
                  </span>
                )}
                <p className="text-xs font-semibold text-slate-800 group-hover:text-green-700 transition-colors leading-snug">
                  {post.title}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}