/**
 * ArticleCard - Reusable blog article card component
 *
 * Used in article grids for displaying blog post previews
 * with image, tag, title, excerpt, and meta information.
 */

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

export interface ArticleCardProps {
  /** Blog post metadata */
  post: BlogMetadata;
  /** Language for localization */
  lang: "ar" | "en";
  /** Card index for numbering (1-based) */
  index: number;
  /** Optional image sizes attribute for optimization */
  imageSizes?: string;
}

export default function ArticleCard({
  post,
  lang,
  index,
  imageSizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
}: ArticleCardProps) {
  return (
    <article className="group bg-white hover:bg-[#FAFAFA] transition-colors duration-300">
      <Link href={`/${lang}/blog/${post.slug}`} className="block">
        {/* Image */}
        <div className="relative h-52 overflow-hidden">
          {post.coverImage ? (
            <Image
              src={post.coverImage}
              alt={post.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes={imageSizes}
              unoptimized={post.coverImage.endsWith(".svg")}
            />
          ) : (
            <BlogPlaceholder
              title={post.title}
              tag={post.tags?.[0]}
              size="md"
            />
          )}

          {/* Article number overlay */}
          <div className="absolute bottom-4 left-4">
            <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">
          {/* Tag */}
          {post.tags && post.tags.length > 0 && (
            <div className="flex items-center gap-2 mb-3">
              <span
                className="w-1.5 h-1.5"
                style={{ backgroundColor: BLOG_COLORS.primary }}
              />
              <span
                className="text-xs font-bold uppercase tracking-wider"
                style={{ color: BLOG_COLORS.primary }}
              >
                {post.tags[0]}
              </span>
            </div>
          )}

          {/* Title */}
          <h3
            className="text-lg font-bold leading-tight mb-3 line-clamp-2 transition-colors duration-300"
            style={{ color: BLOG_COLORS.heading }}
          >
            <span className="group-hover:text-[#10B981]">{post.title}</span>
          </h3>

          {/* Excerpt */}
          <p
            className="text-sm line-clamp-2 mb-4"
            style={{ color: BLOG_COLORS.body }}
          >
            {cleanExcerpt(post.excerpt || "")}
          </p>

          {/* Meta */}
          <div
            className="flex items-center justify-between text-xs"
            style={{ color: BLOG_COLORS.body }}
          >
            <div className="flex items-center gap-2">
              <div
                className="w-6 h-6 flex items-center justify-center text-xs font-bold text-white"
                style={{ backgroundColor: BLOG_COLORS.primary }}
              >
                {post.author?.charAt(0).toUpperCase() || "M"}
              </div>
              <span>{post.author || "Mawidi"}</span>
            </div>
            <time dateTime={post.date}>{formatBlogDate(post.date, lang)}</time>
          </div>

          {/* Hover underline */}
          <div
            className="w-0 group-hover:w-12 h-0.5 mt-4 transition-all duration-300"
            style={{ backgroundColor: BLOG_COLORS.primary }}
          />
        </div>
      </Link>
    </article>
  );
}