import { IconButton } from "@mui/material";
import { Circle } from "@mui/icons-material";
import React, { FC } from "react";

interface BreakpointButtonProps {
  handleClick: () => void;
  size?: "small" | "medium" | "large";
  changeColor?: boolean;
}

export const BreakpointButton =
  ({ handleClick, size, changeColor }: BreakpointButtonProps) => {
  return (
    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
    sx={{
      "&:hover": {
        background: 'transparent',
      }
    }}
    >
      <Circle  sx={{
        fontSize: '1rem',
        marginLeft: '5px',
        color: changeColor ? 'red': 'gray',
        "&:hover": {
          color: changeColor ? 'darkRed' : 'dimgray',
        }
      }}/>
    </IconButton>
  );
};
