/**
 * FeaturedCard - Large featured article card component
 *
 * Used in the featured posts section with a full-bleed image
 * and overlay content for highlighted articles.
 */

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

export interface FeaturedCardProps {
  /** Blog post metadata */
  post: BlogMetadata;
  /** Language for localization */
  lang: "ar" | "en";
  /** Optional image sizes attribute */
  imageSizes?: string;
}

export default function FeaturedCard({
  post,
  lang,
  imageSizes = "(max-width: 1024px) 100vw, 50vw",
}: FeaturedCardProps) {
  return (
    <Link
      href={`/${lang}/blog/${post.slug}`}
      className="group relative bg-white overflow-hidden"
    >
      {/* Image */}
      <div className="relative h-72 lg:h-96 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="lg" />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />

        {/* Content overlay */}
        <div className="absolute inset-0 flex flex-col justify-end p-8">
          {/* Tag */}
          {post.tags && post.tags.length > 0 && (
            <span className="inline-flex self-start items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-sm text-white text-xs font-bold uppercase tracking-wider mb-4">
              <span
                className="w-1.5 h-1.5"
                style={{ backgroundColor: BLOG_COLORS.primary }}
              />
              {post.tags[0]}
            </span>
          )}

          {/* Title */}
          <h3 className="text-2xl md:text-3xl font-bold text-white leading-tight mb-4 group-hover:text-[#10B981] transition-colors duration-300">
            {post.title}
          </h3>

          {/* Meta */}
          <div className="flex items-center gap-4 text-white/70 text-sm">
            <span>{post.author}</span>
            <span className="w-1 h-1 bg-white/50 rounded-full" />
            <time dateTime={post.date}>{formatBlogDate(post.date, lang)}</time>
            {post.readingTime && (
              <>
                <span className="w-1 h-1 bg-white/50 rounded-full" />
                <span>{post.readingTime}</span>
              </>
            )}
          </div>

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