import type {
  CSSProperties,
  FC,
  MouseEvent,
  PropsWithChildren,
  ReactElement,
  ReactNode,
} from 'react';

import { Button as MuiButton } from '@mui/material';

export type ButtonProps = PropsWithChildren<{
  className?: string;
  disabled?: boolean;
  endIcon?: ReactElement;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
  beginIcon?: ReactElement;
  style?: CSSProperties;
  tabIndex?: number;
  listMenuItems?: ReactNode;
}>;

export const Button: FC<ButtonProps> = (props) => {
  return (
    <MuiButton
      className={`wallet-adapter-button ${props.className || ''}`}
      disabled={props.disabled}
      style={props.style}
      onClick={props.onClick}
      tabIndex={props.tabIndex || 0}
      type="button"
      {...props}
    >
      {props.beginIcon && (
        <i className="wallet-adapter-button-start-icon">{props.beginIcon}</i>
      )}
      {props.children}
      {props.endIcon && (
        <i className="wallet-adapter-button-end-icon">{props.endIcon}</i>
      )}
    </MuiButton>
  );
};
