import { Box, Button, useTheme } from "@mui/material";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { FC } from "react";

type StepButtonsBlockProps = {
  onSmallBtnClick?: () => void;
  onLargeBtnClick?: () => void;
  isSmallBtnMissing?: boolean;
  isLargeBtnMissing?: boolean;
  isSmallBtnDisabled?: boolean;
  isLargeBtnDisabled?: boolean;
  smallBtnText?: string;
  largeBtnText?: string;
  largeBtnType?: "button" | "submit" | "reset";
};

export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
  onSmallBtnClick,
  onLargeBtnClick,
  isSmallBtnMissing,
  isLargeBtnMissing,
  smallBtnText,
  largeBtnText,
  isSmallBtnDisabled,
  isLargeBtnDisabled,
  largeBtnType,
}) => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "end",
        alignItems: "end",
        gap: "10px",
        mt: "20px"
      }}
    >
      {isSmallBtnMissing || (
        <Button
          variant="outlined"
          sx={{
            padding: "10px 20px",
            borderRadius: "8px",
            height: "44px",
            color: theme.palette.brightPurple.main,
          }}
          data-cy="back-button"
          disabled={isSmallBtnDisabled}
          onClick={onSmallBtnClick}
        >
          {smallBtnText ? (
            smallBtnText
          ) : (
            <ArrowLeft color={theme.palette.brightPurple.main} />
          )}
        </Button>
      )}
      {isLargeBtnMissing || (
        <Button
          data-cy="next-step"
          variant="contained"
          disabled={isLargeBtnDisabled}
          type={largeBtnType ? largeBtnType : "button"}
          sx={{
            height: "44px",
            padding: "10px 20px",
            borderRadius: "8px",
            background: theme.palette.brightPurple.main,
            fontSize: "18px",
          }}
          onClick={onLargeBtnClick}
        >
          {largeBtnText ? largeBtnText : "Далее"}
        </Button>
      )}
    </Box>
  );
};