import Image from "next/image";
import Link from "next/link";
import { POSTS } from "@/data/blog-posts";

interface BlogRelatedProps {
  currentId: string;
}

export function BlogRelated({ currentId }: BlogRelatedProps) {
  const related = POSTS.filter((p) => p.id !== currentId).slice(0, 2);

  return (
    <section className="b-related">
      <div className="b-wrap b-related-inner">
        <div className="b-related-head">
          <h2 className="b-related-heading">
            Keep <span className="b-serif" style={{ fontWeight: 500 }}>reading.</span>
          </h2>
          <Link href="/blogs" className="b-link-arrow">
            All articles →
          </Link>
        </div>

        <div className="b-related-grid">
          {related.map((post) => (
            <Link key={post.id} href={`/blog/${post.slug}`} className="b-rel-card">
              <div className="b-rel-card-img">
                <Image
                  src={post.image}
                  alt={post.title}
                  fill
                  sizes="(max-width: 600px) 100vw, 50vw"
                  style={{ objectFit: "cover" }}
                />
              </div>
              <div className="b-rel-card-body">
                <span className="b-tag" style={{ display: "inline-flex" }}>{post.cat}</span>
                <h3 className="b-rel-card-title">{post.title}</h3>
                <div className="b-meta" style={{ fontSize: 13, marginTop: 14 }}>
                  <span>{post.date}</span>
                  <span className="b-sep" />
                  <span>{post.read} read</span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}