/**
 * <img> avec srcset/sizes pré-rempli sur les variantes Karbé.
 * Drop-in remplacement pour les balises `<img src=… />` côté front.
 */

import { buildSrcSet } from "@/lib/image-variants";

type Props = {
  src: string;
  alt: string;
  /** Indication CSS pour le browser. Ex: "(min-width: 768px) 800px, 100vw" */
  sizes?: string;
  className?: string;
  loading?: "lazy" | "eager";
  fetchPriority?: "high" | "low" | "auto";
  width?: number;
  height?: number;
  decoding?: "async" | "sync" | "auto";
  draggable?: boolean;
  style?: React.CSSProperties;
  onClick?: () => void;
};

export function ResponsiveImage({
  src,
  alt,
  sizes = "(min-width: 768px) 800px, 100vw",
  className,
  loading = "lazy",
  fetchPriority = "auto",
  width,
  height,
  decoding = "async",
  draggable,
  style,
  onClick,
}: Props) {
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      srcSet={buildSrcSet(src)}
      sizes={sizes}
      alt={alt}
      loading={loading}
      fetchPriority={fetchPriority}
      decoding={decoding}
      width={width}
      height={height}
      draggable={draggable}
      style={style}
      className={className}
      onClick={onClick}
    />
  );
}