import React from 'react';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import CircularProgress from '@mui/material/CircularProgress';

const StyledButton = styled(Button)(({ theme }) => ({
    margin: theme.spacing(1),
    // Дополнительные стили
}));

const CustomButton = ({
    children,
    variant = 'contained',
    color = 'primary',
    loading = false,
    startIcon,
    endIcon,
    ...props
}) => {
    return (
        <StyledButton
            variant={variant}
            color={color}
            startIcon={startIcon && !loading ? startIcon : undefined}
            endIcon={endIcon && !loading ? endIcon : undefined}
            disabled={loading}
            {...props}
        >
            {loading ? <CircularProgress size={24} /> : children}
        </StyledButton>
    );
};

export default CustomButton;