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

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

const BaseIconButton = ({ colorVariant, ...props }: BaseIconButtonProps) => {
    return (
        <MuiIconButton
            {...props}
            LinkComponent={NextLink}
            disabled={props.disabled || props.loading}
            {...(colorVariant
                ? {
                      sx: getButtonStyle(colorVariant, true, props.sx),
                  }
                : {
                      sx: {
                          ...props.sx,
                      },
                  })}
        >
            {props.loading ? <CircularProgress size={20} color='inherit' /> : props.children}
        </MuiIconButton>
    );
};

export default BaseIconButton;
