/**
 * Shared featured-image frame for the public site: one aspect ratio, one placeholder,
 * and aligned overlays so home grid, archive rows, and article hero stay visually consistent.
 */

export const postFeaturedAspectClass = "aspect-[16/10]";

const placeholderCore =
  "flex items-center justify-center bg-[#12110f] font-ctkp-display text-[clamp(1.5rem,5vw,1.875rem)] text-amber-200/10 select-none";

export function PostFeaturedPlaceholder({ className = "" }: { className?: string }) {
  return (
    <div className={`${placeholderCore} ${className}`.trim()} aria-hidden>
      ✦
    </div>
  );
}

const overlayList =
  "pointer-events-none absolute inset-0 bg-gradient-to-t from-stone-950/85 via-stone-950/10 to-transparent sm:bg-gradient-to-r sm:from-transparent sm:via-stone-950/20 sm:to-stone-950/75";

const overlayCover =
  "pointer-events-none absolute inset-0 bg-gradient-to-t from-stone-950/82 via-stone-950/5 to-transparent opacity-90";

type PostFeaturedImageProps = {
  src: string;
  alt: string;
  className?: string;
  imgClassName?: string;
  variant: "list" | "cover";
};

export function PostFeaturedImage({
  src,
  alt,
  className = "",
  imgClassName = "",
  variant,
}: PostFeaturedImageProps) {
  const overlay = variant === "list" ? overlayList : overlayCover;
  return (
    <div className={`relative w-full shrink-0 overflow-hidden bg-black/50 ${className}`.trim()}>
      {/* eslint-disable-next-line @next/next/no-img-element -- remote CMS/API URLs; not in next/image remotePatterns */}
      <img
        src={src}
        alt={alt}
        decoding="async"
        className={`absolute inset-0 h-full w-full object-cover opacity-92 ${imgClassName}`.trim()}
      />
      <div className={overlay} aria-hidden />
    </div>
  );
}