import Image from "next/image";
import type { BlogPost } from "@/content/blog";
import { cn } from "@/lib/utils";

type Illustration = BlogPost["coverIllustration"];

interface BlogCoverArtProps {
  illustration?: Illustration;
  variant?: "card" | "hero";
  className?: string;
  imageSrc?: string | null;
  alt?: string | null;
}

/**
 * Standardized 16:9 editorial banner image component for blog posts (§Part 8).
 * Replaces old custom code graphic compositions with consistent, high-contrast,
 * responsive image banners (16:9 ratio, object-fit: cover, rounded corners).
 */
export function BlogCoverArt({
  illustration,
  variant = "card",
  className,
  imageSrc: customSrc,
  alt: customAlt,
}: BlogCoverArtProps) {
  const isHero = variant === "hero";

  // Standardized fallback images based on topic
  const resolvedSrc =
    customSrc ||
    (illustration === "funding"
      ? "/images/blog/team-series-a.jpg"
      : illustration === "latency" || illustration === "pricing"
        ? "/images/blog/blog-banner-voice.webp"
        : "/images/blog/blog-default-banner.webp");

  const resolvedAlt =
    customAlt ||
    (illustration === "funding"
      ? "The Quto AI team"
      : illustration === "latency" || illustration === "pricing"
        ? "Conversational voice AI architecture"
        : "Enterprise AI and platform intelligence");

  return (
    <div
      className={cn(
        "relative w-full aspect-[16/9] overflow-hidden bg-neutral-100 dark:bg-neutral-900",
        !isHero && "border-b border-border/40",
        className,
      )}
    >
      <Image
        src={resolvedSrc}
        alt={resolvedAlt}
        fill
        className="object-cover transition-transform duration-500 group-hover:scale-105 motion-reduce:transition-none"
        sizes={isHero ? "(max-width: 1024px) 100vw, 50vw" : "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"}
        priority={isHero}
      />
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-40 transition-opacity group-hover:opacity-50" />
    </div>
  );
}