import { urlFor } from "@/sanity/client";

type Props = {
  image: { lqip?: string; [k: string]: unknown } | null | undefined;
  alt?: string;
  className?: string;
  sizes?: string;
  widths?: number[];
  priority?: boolean;
};

// Responsive <img> served from Sanity's image CDN. Works under static export
// (no Next image server needed).
export function SanityImage({
  image,
  alt = "",
  className,
  sizes = "100vw",
  widths = [480, 768, 1080, 1440, 1920],
  priority = false,
}: Props) {
  if (!image || !(image as { asset?: unknown }).asset) return null;

  const url = (w: number) =>
    urlFor(image as never)
      .width(w)
      .quality(80)
      .auto("format")
      .fit("max")
      .url();

  const src = url(widths[widths.length - 1]);
  const srcSet = widths.map((w) => `${url(w)} ${w}w`).join(", ");
  const lqip = image.lqip;

  return (
    <img
      src={src}
      srcSet={srcSet}
      sizes={sizes}
      alt={alt}
      loading={priority ? "eager" : "lazy"}
      decoding="async"
      className={className}
      style={
        lqip
          ? { backgroundSize: "cover", backgroundImage: `url(${lqip})` }
          : undefined
      }
    />
  );
}