import * as react from 'react';
import { ImgHTMLAttributes, ReactNode } from 'react';
import { SandboxMount } from '../mounts.js';
import '../generated/spaces.js';
import '../tasks.js';
import '@immediately-run/mdx-plugins';

/** Props for {@link MountImage}. Extends the native `<img>` attributes (minus `src`,
 *  which the component derives from the mounted file). */
interface MountImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
    /** The mount whose file to display (`null`/`undefined` renders `loading`). */
    mount: SandboxMount | null | undefined;
    /** Mount-relative path to the image file (`null`/`undefined` renders `loading`). */
    relPath: string | null | undefined;
    /** Override the MIME type inferred from the extension (rarely needed). */
    type?: string;
    /** Rendered while the bytes load. Defaults to nothing. (Named `placeholder`, not
     *  `loading`, so the native `<img loading="lazy">` attribute still passes through.) */
    placeholder?: ReactNode;
    /** Rendered when the read fails or the file is missing. Defaults to nothing. */
    fallback?: ReactNode;
}
/**
 * Display an image file from a mount. Reads the bytes off the sandbox ZenFS, turns
 * them into an object URL, and renders an `<img>` — revoking the URL for you on
 * unmount / prop change (via {@link useObjectUrl}). This is the drop-in for the
 * pattern apps used to hand-roll: read bytes → `Blob` → `createObjectURL` → revoke.
 *
 * Any extra `<img>` attribute (`className`, `style`, `onClick`, `width`, …) passes
 * straight through. Provide `loading` / `fallback` for the pending and error states.
 *
 * ```tsx
 * <MountImage
 *   mount={mount}
 *   relPath="photos/cat.png"
 *   alt="cat"
 *   placeholder={<Spinner />}
 *   fallback={<span>missing</span>}
 * />
 * ```
 */
declare function MountImage({ mount, relPath, type, placeholder, fallback, alt, ...imgProps }: MountImageProps): react.JSX.Element;

export { MountImage, type MountImageProps };