import { alpha, IconButton, useTheme } from '@mui/material';

import { type ToolButtonProps } from './types';

export const ToolButton = ({
  label,
  Icon,
  onClick = () => null,
  disabled = false,
}: ToolButtonProps) => {
  const { palette } = useTheme();

  return (
    <IconButton
      aria-label={label}
      title={label}
      disabled={disabled}
      variant="tertiary"
      sx={{
        borderRadius: 0,
        '&:hover': {
          backgroundColor: alpha(palette.shadows?.inverted!, 0.5),
        },
        color: palette.new.text.neutral.inverted,
        '& svg': {
          stroke: palette.new.text.neutral.inverted,
        },
      }}
      onClick={onClick}
    >
      <Icon />
    </IconButton>
  );
};

export default ToolButton;
