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-image-button"
        sx={{
          p: 0,
          minWidth: "20px",
          width: "20px",
        }}
      >
        <Plus />
      </Button>
    </Box>
  );
}