import React, { useMemo } from "react"
import BButton, { ButtonProps as BButtonProps } from "react-bootstrap/Button"
import "./Button.scss"

interface ButtonProps extends BButtonProps {
    iconName?: string
    children?: any
    size?: "sm" | undefined | "lg"
    opacity?: undefined | "0" | "25" | "50" | "75" | "100"
    disabled?: boolean
    presentation?: "normal" | "outline" | "subtle"
}

const Button = ({
    children,
    className,
    iconName,
    opacity,
    variant = "primary",
    presentation = "normal",
    ...props
}: ButtonProps) => {
    const variantPresentation = useMemo(() => {
        if (presentation === "subtle" && !variant?.includes("subtle")) {
            return `subtle-${variant}`
        }
        if (presentation === "outline" && !variant?.includes("outline")) {
            return `outline-${variant}`
        }
        return variant
    }, [variant, presentation])

    return (
        <BButton
            variant={variantPresentation}
            className={`${className ?? ""} ${opacity ? `opacity-${opacity}` : ""}`.trim()}
            {...props}
        >
            {iconName && <i className={`bi bi-${iconName}`}></i>}
            {iconName && children && <>&nbsp;</>}
            {children}
        </BButton>
    )
}

export default Button
export { Button, ButtonProps }