export function ResponsiveImage({
  src,
  alt,
  className,
  eager = false,
}) {
  if (!src) {
    return (
      <div
        role="img"
        aria-label={alt}
        className={`grid place-items-center bg-paper text-sm text-muted ${className ?? ""}`}
      >
        Нет изображения
      </div>
    );
  }

  const sized = (width) => (src.includes("w=") ? src.replace(/w=\d+/, `w=${width}`) : src);

  return (
    <img
      src={sized(900)}
      srcSet={`${sized(480)} 480w, ${sized(900)} 900w, ${sized(1400)} 1400w`}
      sizes={eager ? "(max-width: 48rem) 100vw, 60vw" : "auto, (max-width: 48rem) 100vw, 40vw"}
      loading={eager ? "eager" : "lazy"}
      fetchPriority={eager ? "high" : "auto"}
      decoding="async"
      width="1400"
      height="900"
      alt={alt}
      className={className}
    />
  );
}