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

type ImageThumbnailRatio = "1:1" | "16:9" | "4:3" | "3:2" | "2:3" | "9:16" | "custom";
type ImageThumbnailOverlay = "none" | "fade" | "dark";
interface ImageThumbnailProps extends ThemeOverrideProps {
    /** Image source URL */
    src: string;
    /** Alt text for the image */
    alt?: string;
    /** Aspect ratio of the thumbnail */
    ratio?: ImageThumbnailRatio;
    /** Custom aspect ratio (only used when ratio is 'custom') */
    customRatio?: number;
    /** Width of the thumbnail */
    width?: number | string;
    /** Height of the thumbnail (overrides ratio if provided) */
    height?: number | string;
    /** Border radius */
    borderRadius?: number;
    /** Overlay type */
    overlay?: ImageThumbnailOverlay;
    /** Content displayed in the center (e.g., play button) */
    centerContent?: React.ReactNode;
    /** Content displayed in top-left corner */
    tagsTopLeft?: React.ReactNode;
    /** Content displayed in top-right corner */
    tagsTopRight?: React.ReactNode;
    /** Content displayed in bottom-left corner */
    tagsBottomLeft?: React.ReactNode;
    /** Content displayed in bottom-right corner */
    tagsBottomRight?: React.ReactNode;
    /** Click handler */
    onPress?: () => void;
    /** Padding for tag positions */
    tagPadding?: number;
    /** Gap between tags */
    tagGap?: number;
    testID?: string;
}

declare const ImageThumbnail: React.FC<ImageThumbnailProps>;

export { ImageThumbnail, type ImageThumbnailOverlay, type ImageThumbnailProps, type ImageThumbnailRatio };