import {defaultIconSize} from "./SvgIcon";
import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions";
import clsx from "clsx";
import React from "react";

type ButtonProps = React.HTMLAttributes<HTMLButtonElement> & BasicButtonProps & {
    onClick: () => void;
    disabled?: boolean;
};

/**
 * Button component. Styles are defined in BasicButtonDefinitions.ts
 */
export default function Button({
                                   onClick,
                                   icon: Icon,
                                   text,
                                   buttonType = ButtonType.DefaultButton,
                                   className = "",
                                   disabled = false,
                                   ...props
                               }: ButtonProps) {
    return (
        <button
            className={clsx(
                basicButtonStyle,
                buttonType.backgroundColor,
                buttonType.textColor,
                className
            )}
            onClick={onClick}
            disabled={disabled}
            {...props}
        >
            <div className="flex items-center gap-2">
                {Icon && (
                    <Icon
                        size={defaultIconSize}
                    />
                )}
                {text}
            </div>
        </button>
    );
}