import { CSSProperties, RefObject } from "react";
import { useTheme } from "@/theme/ThemeContext";

export type ImageProps = {
    ref?: RefObject<any>;
    src?: string;
    boxSize?: string;
    onChange?: (e) => void;
    style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};

export const Image = ({
    ref,
    src,
    boxSize,
    onChange,
    style,
}: ImageProps) => {
    const { convertStyle } = useTheme();
    const themedStyle = style ? convertStyle({ width: boxSize, height: boxSize, ...style }) : undefined;
    return (
        <img
            ref={ref}
            src={src}
            onChange={onChange}
            style={themedStyle}
        >
        </img>
    );
};