import * as React from "react";
import {ButtonHTMLAttributes, ReactNode} from "react";
import styles from "./Button.module.scss";
import Loader from "../loader/Loader";

interface Props extends ButtonHTMLAttributes<ReactNode> {
    theme?: "primary" | "secondary" | "ghost";
    size?: "thin" | "default";
    icon?: ReactNode;
    loading?: boolean;
}

export default function Button({size = "default", theme = "primary", icon, loading, ...props}: Props): JSX.Element {
    return (
            <button className={styles.button}
                    disabled={props.disabled || loading}
                    data-theme={theme}
                    data-size={size}
                    data-icon={Boolean(icon)}
                    data-loading={loading}
                    {...props}>
                {props.children}
                {loading && <Loader/>}
                {icon && !loading && icon}
            </button>
    );
}