/**
 * RelatedPostsSection - Displays related blog posts
 *
 * Shows a grid of related articles at the bottom of blog posts.
 */

import Link from "next/link";
import Image from "next/image";
import { BlogMetadata } from "@/lib/blog.types";
import {
  BLOG_COLORS,
  BLOG_STYLES,
  SECTION_NUMBERS,
  formatBlogDate,
  padNumber,
} from "@/lib/blog.config";
import BlogPlaceholder from "./BlogPlaceholder";
import SectionHeader from "./SectionHeader";

export interface RelatedPostsSectionProps {
  /** Related posts to display */
  posts: BlogMetadata[];
  /** Language for localization */
  lang: "ar" | "en";
  /** Translations for display text */
  translations: {
    relatedPosts: string;
    continueReading: string;
  };
}

export default function RelatedPostsSection({
  posts,
  lang,
  translations,
}: RelatedPostsSectionProps) {
  if (posts.length === 0) {
    return null;
  }

  return (
    <section
      className="py-20 md:py-28"
      style={{ backgroundColor: BLOG_COLORS.bgSecondary }}
      aria-labelledby="related-posts-heading"
    >
      <div className="max-w-7xl mx-auto px-6">
        {/* Section Header */}
        <SectionHeader
          sectionNumber={SECTION_NUMBERS.more}
          title={translations.relatedPosts}
          subtitle={translations.continueReading}
        />

        {/* Related Posts Grid */}
        <div
          className={`grid md:grid-cols-2 lg:grid-cols-3 ${BLOG_STYLES.editorialGrid}`}
        >
          {posts.map((post, idx) => (
            <RelatedPostCard
              key={post.slug}
              post={post}
              lang={lang}
              index={idx + 1}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/** Individual related post card */
function RelatedPostCard({
  post,
  lang,
  index,
}: {
  post: BlogMetadata;
  lang: "ar" | "en";
  index: number;
}) {
  return (
    <Link
      href={`/${lang}/blog/${post.slug}`}
      className="group bg-white hover:bg-white transition-colors duration-300"
    >
      {/* Image */}
      <div className="relative h-48 overflow-hidden">
        {post.coverImage ? (
          <Image
            src={post.coverImage}
            alt={post.title}
            fill
            className={BLOG_STYLES.imageHover}
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            unoptimized={post.coverImage.endsWith(".svg")}
          />
        ) : (
          <BlogPlaceholder title={post.title} tag={post.tags?.[0]} size="sm" />
        )}
        <div className="absolute bottom-3 left-3">
          <span
            className="font-mono text-xs px-2 py-1"
            style={{
              color: "rgba(255, 255, 255, 0.8)",
              backgroundColor: "rgba(0, 0, 0, 0.3)",
              backdropFilter: "blur(4px)",
            }}
            dir="ltr"
          >
            {padNumber(index)}
          </span>
        </div>
      </div>

      {/* Content */}
      <div className="p-6">
        {post.tags && post.tags.length > 0 && (
          <div className="flex items-center gap-2 mb-3">
            <span className={BLOG_STYLES.dotIndicator} />
            <span
              className="text-xs font-bold uppercase tracking-wider"
              style={{ color: BLOG_COLORS.primary }}
            >
              {post.tags[0]}
            </span>
          </div>
        )}
        <h3
          className={`text-lg font-bold leading-tight line-clamp-2 mb-3 ${BLOG_STYLES.titleHover}`}
          style={{ color: BLOG_COLORS.heading }}
        >
          {post.title}
        </h3>
        <div
          className="flex items-center gap-2 text-xs"
          style={{ color: BLOG_COLORS.body }}
        >
          <span>{post.author}</span>
          <span className="w-1 h-1 bg-slate-300 rounded-full" />
          <time dateTime={post.date}>{formatBlogDate(post.date, lang)}</time>
        </div>
        <div className={BLOG_STYLES.hoverUnderline} />
      </div>
    </Link>
  );
}