import React from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

type ImageRatio = "1:1" | "2:3" | "3:2" | "16:9" | "4:3" | "9:16" | "Custom";
interface ImageProps extends ThemeOverrideProps {
    /** Image source URL */
    src?: string;
    /** Image alt text */
    alt?: string;
    /** Aspect ratio of the image. Defaults to '1:1' */
    ratio?: ImageRatio;
    /** Custom aspect ratio as a string (e.g. '21 / 9') or number (e.g. 2.33) if ratio is set to 'Custom' */
    customRatio?: string | number;
    /** Optional slot for overlay or placeholder content */
    slot?: React.ReactNode;
    /** Width of the image container. Defaults to '100%' */
    width?: number | string;
    /** Border radius of the image container. Defaults to 0 */
    borderRadius?: number | string;
    /** Style for the container Box */
    style?: React.CSSProperties;
    /** Style for the img element */
    imageStyle?: React.CSSProperties;
    testID?: string;
}
/**
 * Image component with support for various aspect ratios and overlays.
 */
declare const Image: React.FC<ImageProps>;

export { Image, type ImageProps, type ImageRatio };