import { createElement } from 'react';
/**
 * Renders a GradialImage as a <picture> element with responsive <source> entries,
 * or a plain <img> when no art-directed sources exist.
 *
 * The compiler output determines the rendering:
 * - sources[] populated → <picture> with <source> elements (art direction / format variants)
 * - sources[] empty → <img> with fallback src
 */
export function GradialPicture({ image, ...attrs }) {
    const img = createElement('img', {
        src: image.fallback.src,
        alt: image.alt,
        width: image.fallback.width > 0 ? image.fallback.width : undefined,
        height: image.fallback.height > 0 ? image.fallback.height : undefined,
        loading: 'lazy',
        decoding: 'async',
        ...attrs,
    });
    if (!image.sources?.length) {
        return img;
    }
    return createElement('picture', null, ...image.sources.map((source, index) => createElement('source', {
        key: index,
        media: source.media,
        type: source.type,
        srcSet: source.srcset,
        sizes: source.sizes,
    })), img);
}
