import { Button, SxProps, Theme, useTheme } from "@mui/material";

interface Props {
  Icon: React.ElementType;
  isActive?: boolean;
  onClick: () => void;
  sx?: SxProps<Theme>;
}

export default function SelectableIconButton({
  Icon,
  isActive = false,
  onClick,
  sx,
}: Props) {
  const theme = useTheme();

  return (
    <Button
      onClick={onClick}
      variant="outlined"
      startIcon={
        <Icon
          color={
            isActive
              ? theme.palette.brightPurple.main
              : theme.palette.grey2.main
          }
        />
      }
      sx={{
        backgroundColor: isActive
          ? undefined
          : theme.palette.background.default,
        borderColor: isActive
          ? theme.palette.brightPurple.main
          : theme.palette.grey2.main,
        color: isActive
          ? theme.palette.brightPurple.main
          : theme.palette.grey2.main,
        p: "7px",
        width: "auto",
        minWidth: 0,
        "& .MuiButton-startIcon": {
          mr: 0,
          ml: 0,
        },
        "&:hover": {
          borderColor: isActive
            ? theme.palette.brightPurple.main
            : theme.palette.grey2.main,
        },
        ...sx,
      }}
    />
  );
}