frontPanel/src/ui_kit/AddOrEditImageButton.tsx

import Plus from "@icons/questionsPage/plus";
import { Box, Button, SxProps, Theme } from "@mui/material";
import Image from "../assets/icons/questionsPage/image";


interface Props {
    sx?: SxProps<Theme>;
    imageSrc?: string;
    onImageClick?: () => void;
    onPlusClick?: () => void;
}

export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, imageSrc }: Props) {

    return (
        <Box sx={{
            display: "flex",
            height: "40px",
            minWidth: "60px",
            width: "60px",
            borderRadius: "3px",
            overflow: "hidden",
            ...sx,
        }}>
            <Button
                onClick={onImageClick}
                sx={{
                    p: 0,
                    minWidth: "40px",
                    flexGrow: 1,
                    backgroundColor: "#EEE4FC",
                }}>
                {imageSrc ? (
                    <img
                        src={imageSrc}
                        alt=""
                        style={{
                            width: "100%",
                            height: "100%",
                            objectFit: "scale-down",
                            display: "block",
                        }}
                    />
                ) : (
                    <Image sx={{
                        height: "100%",
                        width: "100%",
                    }} />
                )}
            </Button>
            <Button
                onClick={onPlusClick}
                data-cy="add-variant-image-button"
                sx={{
                    p: 0,
                    minWidth: "20px",
                    width: "20px",
                }}
            >
                <Plus />
            </Button>
        </Box>
    );
}