import * as react from 'react';
import { ImgHTMLAttributes } from 'react';
import { ImageVariantProps, SlotsToClasses, ImageSlots } from '@trail-ui/theme';

type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
interface ImageProps extends ImgHTMLAttributes<HTMLImageElement>, ImageVariantProps {
    as?: React.ElementType;
    /**
     * Controlled loading state.
     */
    isLoading?: boolean;
    /**
     * A fallback image.
     */
    fallbackSrc?: React.ReactNode;
    /**
     * Whether to disable the loading skeleton.
     * @default false
     */
    disableSkeleton?: boolean;
    /**
     * A callback for when the image `src` has been loaded
     */
    onLoad?: NativeImageProps['onLoad'];
    /**
     * Function called when image failed to load
     */
    onError?: () => void;
    /**
     * A loading strategy to use for the image.
     */
    loading?: NativeImageProps['loading'];
    /**
     * Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element.
     * If you set this prop as `true` neither the skeleton nor the zoom effect will work.
     * @default false
     */
    removeWrapper?: boolean;
    /**
     * Classes object to style the image.
     */
    classNames?: SlotsToClasses<ImageSlots>;
}
declare const _Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLDivElement>>;

export { _Image as Image, ImageProps };