import { Button, ButtonProps } from '@mui/material';

type Props<D extends React.ElementType, P = {}> = {
  icon?: React.ReactNode;
  children: React.ReactNode;
} & ButtonProps<D, P>;

// eslint-disable-next-line import/prefer-default-export
export function AddonButton<D extends React.ElementType, P = {}>({
  icon = undefined,
  children,
  sx,
  ...rest
}: Props<D, P>) {
  const mergedSx = [
    {
      height: 32,
      minWidth: 32,
      borderColor: 'divider',
      borderRadius: '100vh',
      fontSize: 14,
      color: 'text.secondary',

      ...(!children && {
        padding: 0,
        height: 32,

        '.MuiButton-startIcon': {
          margin: 0,
        },
      }),
    },
    ...(Array.isArray(sx) ? sx : [sx]),
  ];

  return (
    <Button startIcon={icon} color="inherit" variant="outlined" sx={mergedSx} {...rest}>
      {children}
    </Button>
  );
}
