import React from 'react';
import { Button as MuiButton, ButtonProps, CircularProgress } from '@mui/material';
import NextLink from '@/components/common/NextLink';
import { ButtonColorVariant, getButtonStyle } from '@/theme/getButtonStyles';

type BaseButtonProps = ButtonProps & {
    loading?: boolean;
    colorVariant?: ButtonColorVariant;
};

const BaseButton = ({ colorVariant, ...props }: BaseButtonProps) => {
    return (
        <MuiButton
            {...props}
            LinkComponent={NextLink}
            disabled={props.disabled || props.loading}
            endIcon={props.loading ? <CircularProgress size={20} color='inherit' /> : props.endIcon ? props.endIcon : null}
            {...(colorVariant
                ? {
                      sx: getButtonStyle(colorVariant, false, props.sx),
                  }
                : {
                      sx: {
                          borderRadius: '8px',
                          padding: '10px 18px',

                          fontSize: '18px',
                          fontWeight: 600,
                          lineHeight: '24px',
                          textTransform: 'capitalize',
                          ...props.sx,
                      },
                  })}
        />
    );
};

export default BaseButton;
