import React from 'react';

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

import { IButton } from './Button.types';

export const Button: React.FC<IButton> = ({
  startIcon,
  endIcon,
  size = 'medium',
  variant = 'contained',
  disabled = false,
  minHeight = BUTTON_MIN_HEIGHT,
  maxHeight,
  borderRadius = '5px',
  fullWidth = true,
  text,
  color,
  backgroundColor,
  loading,
  style,
  onClick,
}) => {
  return (
    <MuiButton
      size={size}
      startIcon={startIcon}
      endIcon={endIcon}
      sx={{
        transition: '0.5s',
        borderRadius: borderRadius,
        minHeight: minHeight,
        maxHeight: maxHeight,
        backgroundColor: backgroundColor,
        color: color,
        ':hover': {
          backgroundColor: backgroundColor + '8d',
        },
        ...style,
      }}
      fullWidth={fullWidth}
      disabled={disabled}
      variant={variant}
      onClick={onClick}
    >
      {loading ? <CircularProgress thickness={5.2} size={30} /> : text}
    </MuiButton>
  );
};

const BUTTON_MIN_HEIGHT = 44;
