import Image from "next/image";
import { cn } from "@/lib/utils";

const FALLBACK = "/dummy/news-2.jpg";

type Props = {
  src?: string | null;
  alt: string;
  className?: string;
  sizes?: string;
};

/** Use inside a `relative` container with fixed height; covers area with `object-cover`. */
export default function ArticleThumbnail({ src, alt, className, sizes }: Props) {
  const url =
    src && String(src).trim().length > 0 ? String(src).trim() : FALLBACK;
  const isLocal = url.startsWith("/");

  if (isLocal) {
    return (
      <Image
        src={url}
        alt={alt}
        fill
        className={cn("object-cover", className)}
        sizes={sizes ?? "(max-width: 768px) 100vw, 25vw"}
      />
    );
  }

  return (
    <img
      src={url}
      alt={alt}
      className={cn("absolute inset-0 h-full w-full object-cover", className)}
    />
  );
}