// <ResponsiveImage src="/assets/images/eric-portrait-hero.webp"
//                  alt="..."
//                  sizes="(max-width: 768px) 100vw, 50vw" />
//
// Resolves to optimized variants under <dir>/optimized/<base>-{400,800,1600}.{avif,webp,jpg}
// produced by scripts/optimize-images.mjs. Falls back to the source file on error.

function ResponsiveImage({ src, alt, sizes = "100vw", loading = "lazy", fetchpriority, className, style }) {
  const match = src.match(/^(.*?)\/([^/]+)\.[^./]+$/);
  if (!match) {
    return <img src={src} alt={alt} loading={loading} fetchPriority={fetchpriority} className={className} style={style} />;
  }
  const dir = match[1];
  const base = match[2];
  const optimizedDir = `${dir}/optimized`;

  const makeSrcSet = (ext) => [400, 800, 1600]
    .map(w => `${optimizedDir}/${base}-${w}.${ext} ${w}w`)
    .join(', ');

  return (
    <picture>
      <source type="image/avif" srcSet={makeSrcSet('avif')} sizes={sizes} />
      <source type="image/webp" srcSet={makeSrcSet('webp')} sizes={sizes} />
      <img
        src={`${optimizedDir}/${base}-800.jpg`}
        alt={alt}
        loading={loading}
        fetchPriority={fetchpriority}
        className={className}
        style={style}
        onError={(e) => {
          if (e.currentTarget.src !== src) e.currentTarget.src = src;
        }}
      />
    </picture>
  );
}

Object.assign(window, { ResponsiveImage });