import { Box, IconButton, useTheme } from "@mui/material";
import AddPlus from "@icons/questionsPage/addPlus";
import { FC } from "react";

type IconBtnAddProps = {
  onAddBtnClick: () => void;
};

export const IconBtnAdd: FC<IconBtnAddProps> = ({ onAddBtnClick }) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        justifyContent: "center",
        borderBottom: `1px solid ${theme.palette.background.default}`,
      }}
    >
      <IconButton
        onClick={onAddBtnClick}
        sx={{
          width: "fit-content",
          marginTop: "20px",
          marginBottom: "66px",
          circle: {
            fill: "#EEE4FC",
          },
          "&:hover": {
            circle: {
              fill: theme.palette.brightPurple.main,
            },
          },
          "&:active": {
            circle: {
              fill: "#581CA7",
            },
          },
        }}
      >
        <AddPlus />
      </IconButton>
    </Box>
  );
};
